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

整理**的時候發現以前公司內部分享寫的ppt

題記：html的font-size:num rem  可以等比改變所有以 rem  為單位的元素

1.以rem 為單位，前端切圖，以640尺寸（保證放大的質量）， width,height,padding,marging 等切距離，以320的尺寸，也可以以640的尺寸。

配合以下**查詢

html

@media only screen and (min-width: 481px)

}@media only screen and (min-width: 561px)

}@media only screen and (min-width: 641px)

body

}比如說320的設計稿，切 marging-top:10px; css 中 則寫   marging-top:1rem;

也可以用640的設計稿切距離，記得除以2，

比如640 切出margin-top:20px;font-size:24px;css中則寫   margin-top:1rem ;font-size: 1.2rem;

那實際瀏覽換算如下

320 中：1rem*62.5%*16px=10px;1.2rem*62.5%*16=12px;

560 中：1rem*109%*16px=17.44px;1.2rem*109%*16=20.928px;

640 中：1rem*125%*16px=20x;1.2rem*125%*16=24px;

1.不使用**查詢,動態的改變以rem為單位元素大小,切圖切距離以640的尺寸

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

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

移動端使用rem布局

移動端的px其實指的是pt，也就是邏輯解析度。以iphone6為例，寬度是750px，但是在css中iphone6的寬度是375px，也就是375pt，而設計稿一般是750px的。所以在移動端中css的px是設計稿中px的一半。將設計稿中的px轉換為移動端中的px 如果設計稿是750px的，在其中有...

移動端布局以及rem的適配

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