手機端用rem+scss做適配

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

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

設置meta標簽

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

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

//iphone設備中的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)生的半透明灰色背景

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

js設置html的默認字體大小（寫在html頭部）

設置scss文件px轉rem

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

@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量實際距離即可，默認設計稿寬750）：

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

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

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

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/112734.html

手機端用rem+scss做適配

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

BDEEFE 2019-08-21 17:38 評論0 收藏0
CSS9:動態(tài) REM-手機專用的自適應方案

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

ityouknow 2019-08-02 10:52 評論0 收藏0
CSS9:動態(tài) REM-手機專用的自適應方案

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

joyqi 2019-08-30 15:54 評論0 收藏0
rem適配移動設備

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

韓冰 2019-08-29 18:41 評論0 收藏0