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

2021-07-22 22:06:59 字數 1059 閱讀 2770

整理**的時候發現以前公司內部分享寫的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,平板,手機 自適應布局,屬於響應式裡的一...