web頁面的自適應開發,要求就是跨平台,跨瀏覽器,一般mobile+pc,前幾天寫了幾個pc端全屏頁面,用的是百分比,在手機上看了下效果 相去甚遠。這麼看來mobile+pc 的自適應 有些時候就是個偽命題。
那對於移動端的自適應就 一般的宣傳頁面全屏滑動那種,用百分比,若複雜了就肯定不行,仔細看了下某淘的處理用的rem為單位,就學習在這個方法吧首先對於設計圖,width 一般是640的。
rem:css3新增了乙個相對單位rem(root em,根em),這樣rem 就應該設定在html,
某淘對此的設定是根據手機寬度設定的,
必不可少的這句:由js 控制的 ,
首先是在蘋果上不一樣,蘋果6就是
font-size就是 window.clientwitdh/10;
淘*裡使用的**:
!function(j, i)
var g, f = j.document,
e = f.documentelement,
d = f.queryselector('meta[name="viewport"]'),
c = f.queryselector('meta[name="flexible"]'),
b = 0,
a = 0,
z = i.flexible || (i.flexible = {});
if (d) else }}
if (!b && !a)
if (e.setattribute("data-dpr", b), !d) else
}j.addeventlistener("resize",
function() ,
!1),
j.addeventlistener("pageshow",
function(b) ,
!1),
"complete" === f.readystate ? f.body.style.fontsize = 12 * b + "px": f.addeventlistener("domcontentloaded",
function() ,
!1),
h(),
z.dpr = j.dpr = b,
z.refreshrem = h,
z.rem2px = function(d) ,
z.px2rem = function(d)
} (window, window.lib || (window.lib = {}));
移動端自適應與rem
提到移動端適配,小夥伴們都會想到rem布局,那麼rem是什麼呢?我們有為什麼要使用rem呢?下面我們就來討論一下。rem是相對於根元素 也就是說到rem又不免想到em。那麼他們之間有什麼血緣關係嗎?是的,他們可能是兄弟 父子,也可能是爺孫關係。它們之間的區別在於,rem依賴於根元素,而em是依賴於父...
移動端自適應rem布局
補充乙個基本知識,不許笑,1rem等於html中設定的字型大小 px 首先,html 的 head 部分中加入如下 initial scale 初始縮放比例,即當瀏覽器第一次載入頁面時的縮放比例。值為 1.0 即原始尺寸。maximum scale 允許瀏覽者縮放到的最大比例,一般設為1.0,即原始...
移動端自適應rem大小
自執行函式封裝 以iphone5的根字型大小為20px螢幕邏輯畫素為320,可以改變 字串名字 in window 判斷window下有沒有這個字串方法屬性,返回布林值 orientationchange 螢幕方向改變時候觸發的函式 resize螢幕尺寸發生改變時候觸發的函式 function do...