手機(jī)端用rem+scss做適配

BDEEFE 發(fā)布于2019-08-21 17:38 / 3513人閱讀

摘要：注意若值為將會占據(jù)頁面位置，浮在頁面上方會覆蓋頁面高度和的屏幕為。

設(shè)置meta標(biāo)簽

// 以上是清瀏覽器緩存用的搜索

//忽略頁面的數(shù)字為電話，忽略email識別

//iphone設(shè)備中的safari私有meta標(biāo)簽，它表示：允許全屏模式瀏覽；

//iphone的私有標(biāo)簽，它指定的iphone中safari頂端的狀態(tài)條的樣式；在web app應(yīng)用下狀態(tài)條（屏幕頂部條）的顏色；默認(rèn)值為default（白色），可以定為black（黑色）和black-translucent（灰色半透明）。注意：若值為“black-translucent”將會占據(jù)頁面px位置，浮在頁面上方（會覆蓋頁面20px高度–iphone4和itouch4的Retina屏幕為40px）。

// 去掉winphone系統(tǒng)a、input標(biāo)簽被點(diǎn)擊時(shí)產(chǎn)生的半透明灰色背景

//強(qiáng)制讓文檔的寬度與設(shè)備的寬度保持1:1，并且文檔最大的寬度比例是1.0，且不允許用戶點(diǎn)擊屏幕放大瀏覽； width - viewport的寬度 height - viewport的高度 initial-scale - 初始的縮放比例 minimum-scale - 允許用戶縮放到的最小比例 maximum-scale - 允許用戶縮放到的最大比例 user-scalable - 用戶是否可以手動縮放

js設(shè)置html的默認(rèn)字體大?。▽懺趆tml頭部）

設(shè)置scss文件px轉(zhuǎn)rem

// 默認(rèn)16是html默認(rèn)字號
// 默認(rèn)750是設(shè)計(jì)稿默認(rèn)寬度
// $n是量取設(shè)計(jì)稿的距離

@charset "UTF-8";
@function rem($n) {
    @return $n / (750 / 16)+rem;
}

編輯方便調(diào)用的函數(shù)：

@function getTop($n) {
    @return ($n - 1206 / 2) / (750 / 16)+rem;
}

@function getLeft($n) {
    @return ($n - 750 / 2) / (750 / 16)+rem;
}

@function getRight($n) {
    @return (($n - 750) / 2) / (750 / 16)+rem;
}

@mixin center($left, $top) { //左右居中 上變
    position: absolute;
    left: 50%;
    top: rem($top);
    margin: 0 0 0 getLeft($left);
}

@mixin centerlt($left, $top) { //上下，左右居中 
    position: absolute;
    left: 50%;
    top: 50%;
    margin: getTop($top) 0 0 getLeft($left);
}
@mixin centerrt($right, $top) { //上下，左右居中 
    position: absolute;
    right: 50%;
    top: 50%;
    margin: getTop($top) getRight($right) 0 0;
}
@mixin middlert($right, $top) { //上下居中 右變
    position: absolute;
    right: rem($right);
    top: 50%;
    margin: getTop($top) 0 0 0;
}

@mixin centerb($left, $bottom) { //左右居中 下變
    position: absolute;
    left: 50%;
    bottom: rem($bottom);
    margin: 0 0 0 getLeft($left);
}

@mixin leftTop($left, $top) { //左變 上變
    position: absolute;
    left: rem($left);
    top: rem($top);
}
@mixin rightTop($right, $top) { //右變 上變
    position: absolute;
    right: rem($right);
    top: rem($top);
}
@mixin leftBottom($left, $bottom) { //右變 上變
    position: absolute;
    left: rem($left);
    bottom: rem($bottom);
}

調(diào)用上面的函數(shù)（寬高距離用ps量實(shí)際距離即可，默認(rèn)設(shè)計(jì)稿寬750）：

.page1-img1{
    width: rem(473);
    height: rem(173);
    @include centerlt(139, 767);
}

GPU云服務(wù)器云服務(wù)器手機(jī)網(wǎng)頁js適配手機(jī) php網(wǎng)站適配手機(jī) js手機(jī)頁面適配 webrtc適配手機(jī)瀏覽器

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/89803.html

發(fā)表評論

登陸后可評論

0條評論

BDEEFE

男|高級講師

我要關(guān)注我要私信

TA的文章

keepalived的weight

閱讀 1361·2021-11-24 09:39
[11.11]RAKsmart服務(wù)器秒殺$30/月,云服務(wù)器全場7折,站群服務(wù)器/大帶寬服務(wù)器持續(xù)熱

閱讀 1354·2021-11-04 16:12
嵌入式新聞早班車-第27期

閱讀 2697·2021-09-24 09:47
v5 server：香港、韓國、臺灣服務(wù)器7折優(yōu)惠;香港BGP服務(wù)器月付低至325元

閱讀 3343·2021-09-01 10:50
關(guān)于js計(jì)算非等寬字體寬度的方法

閱讀 1482·2019-08-30 15:55
入門css3動畫

閱讀 1429·2019-08-30 15:43
CSS3變形的理解

閱讀 650·2019-08-30 11:08
找出數(shù)組 arr 中重復(fù)出現(xiàn)過的元素

閱讀 3587·2019-08-23 18:33

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

手機(jī)端用rem+scss做適配

相關(guān)文章