文章出處

移動端web頁面如何適配，現有兩個方案：

1 設置viewport進行縮放

簡單粗暴，使用過程中反應縮放會導致有些頁面元素會糊的情況。天貓的web app的首頁使用這種方案

在頁面中加入viewport.js

var doc = window.document,
    docEle = doc.documentElement,
    dpr = Math.ceil(window.devicePixelRatio),
    vp = document.querySelector('meta[name="viewport"]'),
    docWidth = docEle.clientWidth,
    r = docWidth / 375;
vp.setAttribute('content', 'width=375,initial-scale=' + r + ',maximum-scale=' + r * dpr + ', minimum-scale=' + r / dpr + ',user-scalable=no');

2 rem能等比例適配所有屏幕

rem是通過根元素進行適配的，網頁中的根元素指的是html。我們通過設置html的字體大小就可以控制rem的大小。

在頁面中加入common.js

var dpr, rem, scale;

var fontEl = document.createElement('style');
var metaEl = document.querySelector('meta[name="viewport"]');
var docEl = document.documentElement;
dpr = window.devicePixelRatio || 1;
rem =  docEl.clientWidth  / 10;
scale = 1 / dpr;

// 設置viewport，進行縮放，達到高清效果
//metaEl.setAttribute('content', 'width=' + dpr * rem + ',initial-scale=1,maximum-scale=1, minimum-scale=1,user-scalable=no');

// 設置data-dpr屬性，留作的css hack之用
docEl.setAttribute('data-dpr', dpr);

// 動態寫入樣式
docEl.firstElementChild.appendChild(fontEl);
fontEl.innerHTML = 'html{font-size:' + rem + 'px;}';

// 給js調用的，某一dpr下rem和px之間的轉換函數
window.rem2px = function(v) {
    v = parseFloat(v);
    return v * rem;
};
window.px2rem = function(v) {
    v = parseFloat(v);
    return v / rem;
};

window.dpr = dpr;
window.rem = rem;

====================計算相應的rem值=方法============================================

1通過sass，定義函數計算rem

$baseFontSize:      64px !default;
$gray:              #cccccc !default;

// pixels to rems 
@function pxToRem($px) {
    @return $px / $baseFontSize * 1rem;
}

body{
    font-size:$baseFontSize;
    color:lighten($gray,10%);
}
.test{
    font-size:pxToRem(30px);
    color:darken($gray,10%);
}

編譯后的css

body {
  font-size: 64px;
  color: #e6e6e6; }

.test {
  font-size: 0.46875rem;
  color: #b3b3b3; }

/*# sourceMappingURL=test.css.map */

2通過工具計算

點擊：  px轉rem工具 

 該工具的用法：

輸入自己頁面的html font size，上傳自己的css代碼，然后下載css,就可以了。

---------------------------參考------------------------------------------ 

 

rem單位詳細講解 :   webapp變革之rem

學習sass:   sass語法 

sass 編譯工具： koala   koala使用教程  

 


文章列表


不含病毒。www.avast.com
arrow
arrow
    全站熱搜
    創作者介紹
    創作者 大師兄 的頭像
    大師兄

    IT工程師數位筆記本

    大師兄 發表在 痞客邦 留言(0) 人氣()