手機端用rem+scss做適配

BDEEFE 發布于2019-08-21 17:38 / 3512人閱讀

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

設置meta標簽

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

//忽略頁面的數字為電話，忽略email識別

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

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

// 去掉winphone系統a、input標簽被點擊時產生的半透明灰色背景

//強制讓文檔的寬度與設備的寬度保持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;
}

編輯方便調用的函數：

@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);
}

調用上面的函數（寬高距離用ps量實際距離即可，默認設計稿寬750）：

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

GPU云服務器云服務器手機網頁js適配手機 php網站適配手機 js手機頁面適配 webrtc適配手機瀏覽器

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

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

手機端用rem+scss做適配

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

fanux 2019-08-29 13:49 評論0 收藏0
CSS9:動態 REM-手機專用的自適應方案

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

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

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

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

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

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