關於移動端rem 布局的一些總結

1.rem是什麼?

rem(font size of the root element)是指相對於根元素的字型大小的單位

第乙個例子：
htmla10px = 1rem * 10px
第二個例子：
htmla20px = 1rem * 20px
推算出：
10px  = 1rem 在根元素（font-size = 10px的時候）；
20px  = 1rem 在根元素（font-size = 20px的時候）；
40px  = 1rem 在根元素（font-size = 40px的時候）；

html設定成100px是為了方便我們計算，如 6rem等於600px。

一.常規情況下js根據螢幕寬度動態計算

(function
(doc,win)
doc.addeventlistener("domcontendloaded",recalc,false
);    
//轉屏
win.addeventlistener(resizeevt,function
(),false
);    
//pageshow,快取相關
win.addeventlistener("pageshow",function
(e)    },
false
);    
//初始化
recalc();
})(document,window);

設計稿一般都是640寬的，psd轉換為 html+css 的時候我們是按照320來做的（用css畫素來度量的話，iphone4、iphone5都是這個尺寸）。在沒有使用rem而是直接把字型、高度之類的寫死的時候，在ps中量出來寬高、字型什麼的每次都得手動除以2再寫到css中。。現在我設定的基準是320下面html，主要是方便每次在ps中測量完了之後不用除以2.

二.rem布局字型不用rem值是因為在retina螢幕下會變的很大,而這時候我們更希望在大螢幕上顯示更多的內容,在**中是用了dpr是判斷

if (!dpr && !scale)  
else
if (devicepixelratio >= 2 && (!dpr || dpr >= 2)) 
else
} else
scale = 1 /dpr;
}document.documentelement.setattribute('data-dpr', dpr);

div [data-dpr="2"] div [data-dpr="3"] div

移動端rem布局總結（Reset257）

總結 rem有兩種適配方案做移動端學得七七八八，記下來，記下來一查詢 1 作用讓手機端，平板端和電腦端的網頁顯示出不同的css效果。主要是尺寸大小 2 兩種語法第一種表示螢幕尺寸最大值為800px media screen and max width 800px p 表示螢幕尺寸為8...

移動端布局以及rem的適配

現有的布局方式固定布局，每乙個元素都是固定的尺寸，內容區域居中在瀏覽器中間內容區域的尺寸 980,1000,1100,1200 響應式布局，利用查詢來實現不同尺寸的瀏覽器顯示結構不一樣 media 根據瀏覽器解析度大小進行適配一般會有三張設計圖，pc,平板,手機自適應布局，屬於響應式裡的一...

移動端布局之REM，以及實際使用總結

整理的時候發現以前公司內部分享寫的ppt 題記 html的font size num rem 可以等比改變所有以 rem 為單位的元素 1.以rem 為單位，前端切圖，以640尺寸保證放大的質量 width,height,padding,marging 等切距離，以320的尺寸，也可以以640的...

關於移動端rem 布局的一些總結

移動端rem布局總結（Reset257）

移動端布局以及rem的適配

移動端布局之REM，以及實際使用總結

相關推薦