1.rem是什麼?
rem(font size of the root element)是指相對於根元素的字型大小的單位
第乙個例子：html設定成100px是為了方便我們計算，如 6rem等於600px。htmla10px = 1rem * 10px
第二個例子：
htmla20px = 1rem * 20px
推算出：
10px = 1rem 在根元素（font-size = 10px的時候）；
20px = 1rem 在根元素（font-size = 20px的時候）；
40px = 1rem 在根元素（font-size = 40px的時候）；
一.常規情況下js根據螢幕寬度動態計算
(function設計稿一般都是640寬的，psd轉換為 html+css 的時候我們是按照320來做的（用css畫素來度量的話，iphone4、iphone5都是這個尺寸）。在沒有使用rem而是直接把字型、高度之類的寫死的時候，在ps中量出來寬高、字型什麼的每次都得手動除以2再寫到css中。。現在我設定的基準是320下面html，主要是方便每次在ps中測量完了之後不用除以2.(doc,win)
doc.addeventlistener("domcontendloaded",recalc,false
);
//轉屏
win.addeventlistener(resizeevt,function
(),false
);
//pageshow,快取相關
win.addeventlistener("pageshow",function
(e) },
false
);
//初始化
recalc();
})(document,window);
二.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的...