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

fanux 發(fā)布于2019-08-29 13:49 / 1752人閱讀

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

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

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

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

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

//iphone的私有標(biāo)簽，它指定的iphone中safari頂端的狀態(tài)條的樣式；在web app應(yīng)用下?tīng)顟B(tài)條（屏幕頂部條）的顏色；默認(rèn)值為default（白色），可以定為black（黑色）和black-translucent（灰色半透明）。注意：若值為“black-translucent”將會(huì)占據(jù)頁(yè)面px位置，浮在頁(yè)面上方（會(huì)覆蓋頁(yè)面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 - 用戶是否可以手動(dòng)縮放

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

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

// 默認(rèn)16是html默認(rèn)字號(hào)
// 默認(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);
}

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

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

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

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

fanux

男|高級(jí)講師

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

TA的文章

2021藍(lán)橋杯你值得擁有

閱讀 2674·2021-11-18 10:02
怎么遠(yuǎn)程登錄云主機(jī)-云主機(jī)怎么遠(yuǎn)程操作？

閱讀 3440·2021-09-22 15:50
寫在35歲，過(guò)去現(xiàn)在和未來(lái)

閱讀 2368·2021-09-06 15:02
【靜態(tài)頁(yè)面架構(gòu)】CSS之盒子模型

閱讀 3587·2019-08-29 16:34
手機(jī)端用rem+scss做適配

閱讀 1753·2019-08-29 13:49
前端面試問(wèn)題（持續(xù)更新）

閱讀 1282·2019-08-29 13:29
解決ios safari中按鈕圓角問(wèn)題

閱讀 3647·2019-08-28 18:08
antd源碼解讀（二）Tooltip組件解析

閱讀 2954·2019-08-26 11:52

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

資訊專欄INFORMATION COLUMN

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

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

相關(guān)文章