成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

手機端用rem+scss做適配

BDEEFE / 3516人閱讀

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

設(shè)置meta標簽




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


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


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


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


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


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

js設(shè)置html的默認字體大小（寫在html頭部）
設(shè)置scss文件px轉(zhuǎn)rem

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

@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è)計稿寬750）：

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

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

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

相關(guān)文章

  • 手機端用rem+scss做適配

    摘要：注意若值為將會占據(jù)頁面位置，浮在頁面上方會覆蓋頁面高度和的屏幕為。 設(shè)置meta標簽 // 以上是清瀏覽器緩存用的搜索 //忽略頁面的數(shù)字為電話，忽略email識別 //iphone設(shè)備中的safari私有meta標簽，它表示：允許全屏模式瀏覽； //iphone的私有標簽，它指定的iphone中safari頂端的狀態(tài)條的樣式； 在web app應用下狀態(tài)條（屏幕頂部條）的顏色； 默...

    fanux 評論0 收藏0

  • CSS9:動態(tài) REM-手機專用的自適應方案

    摘要：一定要強制自己用命令行，強制自己學英語，強制自己看文檔。只有這三條都做了，才有可能成為前端水平的程序員。設(shè)計師的設(shè)計稿寬度需要統(tǒng)一那么相應得，這時會將自動變成寬度為的情況下這樣就無需在手動換算的值了。 CSS9:動態(tài) REM-手機專用的自適應方案 動態(tài) REM是手機專用,是如何適配所有手機的方案,不是響應式方案,例如 : taobao.com 是專門的PC端m.taobao.com 是...

    ityouknow 評論0 收藏0

  • CSS9:動態(tài) REM-手機專用的自適應方案

    摘要：一定要強制自己用命令行，強制自己學英語，強制自己看文檔。只有這三條都做了，才有可能成為前端水平的程序員。設(shè)計師的設(shè)計稿寬度需要統(tǒng)一那么相應得，這時會將自動變成寬度為的情況下這樣就無需在手動換算的值了。 CSS9:動態(tài) REM-手機專用的自適應方案 動態(tài) REM是手機專用,是如何適配所有手機的方案,不是響應式方案,例如 : taobao.com 是專門的PC端m.taobao.com 是...

    joyqi 評論0 收藏0

  • rem適配移動設(shè)備

    摘要：前言移動端適配方案回顧總結(jié)如何使用單位的計算參考的根節(jié)點進行計算，根節(jié)點的字體變化，布局參考的頁面也會相應進行縮放，此為布局的本質(zhì)。動態(tài)改變的值幾乎在每個瀏覽器都將的初始化為，我們動態(tài)改變的話可以暫時將設(shè)置為適配的根節(jié)點初始值。 前言 移動端 rem 適配方案回顧總結(jié) 如何使用 rem rem 單位的計算參考 html 的根節(jié)點 font-size進行計算，根節(jié)點的字體變化，布局參考的...

    韓冰 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<