//user-scalable = no 禁止使用者手指頭放大縮小
2.整體布局預設不設定寬度,預設100%自動填滿
3.父元素一般不設定高度,由子元素撐起來
4.移動端不考慮放大,考慮縮小
5.只設定width:100%,其餘不用設定,自適應盒子的大小
6.文字依然以rem為單位,等比例的放大,縮小
html的font-size 設定為整數,比較好計算 例如:50px 100px
7.所有的布局均使用flex布局來用,不再使用width百分比,float布局了
下面是一段用來配合rem做移動端適配的js函式**
"> // 立即執行函式
// 做移動端適配 配合rem
// 找到最大尺寸720px
// 當大於720px html的font-size設定為100px 幾乎相容所有的大顯示器。
// 考慮問題,螢幕縮小的時候,讓html的fon-size是乙個動態的值,並且與檢視視窗大小有關,這樣就實現了響應式。
(function (window, document)
// 否則設定html的font-size為動態的值 = 檢視視窗寬度 / 100px
document.getelementsbytagname("html")[0].style.fontsize =
view / pick + "px";
}
window.addeventlistener(mode, change, !1);
window.document.addeventlistener("domcontentloaded", change, !1);
})(window, document);
**********==
Rem設計方案
作為font size的單位時,其代表父元素的字型大小,作為其他屬性單位時,代表自身字型大小 問題 1 chrom下有最小字型限制,必需為12px,所以這個值不能小於12 2 如果兩個一樣的元素,但是裡面字型不一樣,那就不能統一設定了。或者元素字型變化了,就又要統一設定一遍 css3新增的乙個相對單...
rem設計方案
考慮問題 螢幕縮小是 時尺寸的問題 讓html的font size是乙個動態值 var viewwidth 750 var pick viewwidth 100 var mode resize function change document.getelementsbytagname html 0 ...
移動端自適應方案 rem布局
1 什麼是rem rem font size of the root element 是乙個相對單位,它是根據根元素 html 的font size大小來計算的,如根元素字型大小為10px,那麼1rem 10px em font size of the element 也是乙個相對單位,它是根據父元...