html
@media only screen and (min-width: 401px)
}@media only screen and (min-width: 428px)
}@media only screen and (min-width: 481px)
}@media only screen and (min-width: 569px)
}@media only screen and (min-width: 641px)
}
2.自動設定html的font-size
(function (doc, win) ;
if (!doc.addeventlistener) return;
win.addeventlistener(resizeevt, recalc, false);
doc.addeventlistener('domcontentloaded', recalc, false);
})(document, window);
3.designwidth:設計稿的實際寬度值,需要根據實際設定,maxwidth:製作稿的最大寬度值,需要根據實際設定
(function(designwidth, maxwidth) ';
}if (docel.firstelementchild) else
//要等 wiewport 設定好後才能執行 refreshrem,不然 refreshrem 會執行2次;
refreshrem();
win.addeventlistener("resize", function() , false);
win.addeventlistener("pageshow", function(e)
}, false);
if (doc.readystate === "complete") else , false);
}})(750, 750);
rem布局解析
移動端的螢幕大小各異,尤其是安卓機,千奇百怪,各種尺寸的機型都有,而且有1倍屏,2倍屏,3倍屏之分,作為精益求精的前端,我們希望找到一種完美適配各種機型的方案。rem是現在主流的移動端自適應布局方案,本文主要介紹了rem布局的原理和通用方案 首先說一下,我們想要達到的自適應效果是什麼。很簡單 元素 ...
關於rem布局
我們知道,當使用rem布局,並配合js動態按照比例設定html標籤上的rem值時,整個頁面是按照螢幕的寬度來整體縮放的。對於高度不限制的頁面 也就是超出一屏頁面可以滾動 這種方案沒有任何問題,簡單暴力。但是對於一些需要布滿一整屏的頁面 比如現在流行的上下 左右滑動的那種 由於乙個頁面的元素必須在乙個...
關於rem布局摘錄
一般情況下使用em或者rem的時候,會寫個樣式 html,body html,這樣設定方便了em rem與px相互轉換,因為瀏覽器預設字型大小16px,所以em的初始值為1em 16px。當設定了body時,1em則 16px 62.5 10px。但是由於谷歌不相容,所以我個人習慣使用 html。目...