注:移動端必須寫:
1.首先設定html
//頁面寬度為html字型大小的rem(即25rem)(推薦html字型大小設定為12px到25px之間,不能設定大於25px,// w3c對網頁最小字型並沒有硬性的規定。只是我們在設計網頁的時候因為考慮到可閱讀性,最小一般為12px大小,
// 如果設定大於25px,可能最終的html的字型大小會小於12px)
/**** 注意rem單位計算方法:
* 元素大小/設計稿的1/25 25分之一
* 320/640 *25 這是一半
**/
var mresize=function();
mresize();
2. 響應式布局
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)}
3.js定義meta 標籤放縮和html字型大小
//1.獲取畫素比值 是裝置上物理畫素和裝置獨立畫素(device-independent pixels (dips))的比例。
var num = 1/window.devicepixelratio;
//2.動態生成視口標籤
document.write('');
//注:以上兩段js可以不用,直接寫meta標籤禁止放縮
//3.獲取頁面的十分之1
var width = document.documentelement.clientwidth/10;
//4.設定html字型大小為頁面十分之1 1rem就是頁面十分之1
(w3c對網頁最小字型並沒有硬性的規定。只是我們在設計網頁的時候因為考慮到可閱讀性,最小一般為12px大小.)
document.getelementsbytagname('html')[0].style.fontsize = width+'px';
/**** 注意rem單位計算方法:
* 元素大小/設計稿的1/10 十分之一
* 320/640 *10 這是一半
**/
移動端適配rem單位
1.rem單位 描述 rem是css中的乙個尺寸單位,和px,em等單位一樣,都是用來設定大小的。rem代表的含義為 是html的字型大小的多少倍 語法 document.documentelement.style.fontsize document.documentelement.clientwi...
移動端 單位 rem
rem是指相對於根元素的字型大小的單位 相對單位 rem和em的區別,em相對于父元素的字型大小的單位。rem相對於根元素html字型大小計算,px是乙個絕對的單位。所以rem可以實現強大的螢幕適配布局 例如 html btn 那麼.btn的寬度為120px 高度為60px 所以在做移動端適配的時候...
移動端rem適配
3 使用js 將設計圖劃分為10等份或者15等份。新建common.less檔案,這是乙個專門來適配的檔案。我們大概可以寫如下的檔案 設定常見的螢幕尺寸 修改裡面的html文字大小 a 一定要寫到最上面 html 我們此次定義的劃分的份數 為 15 no 15 320 media screen an...