溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文小編為大家詳細介紹“怎么理解CSS中的rem及移動端的布局方法”，內容詳細，步驟清晰，細節處理妥當，希望這篇“怎么理解CSS中的rem及移動端的布局方法”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。
一、rem是什么？
rem是css3中新增加的一個單位屬性(fontsizeoftherootelement),根據頁面的根節點的字體大小進行轉變的單位。root！！！！！！！！！根節點，也就是html。
例：(下面例子中的根節點是html，它的字體大小是100px，所以根節點下面的元素所設置的rem，都是1rem=100px。)
rem的初始值是16px，也就是說在沒有設置根節點的font-size的時候，1rem=16px
<html>
<head>
<style>
html,body{font-size:100px;}
header{height:1rem;width:1rem;}
</style>
</head>
<body></body>
<header></header>
</html>
二、em是什么
em也是一個相對單位，em單位是根據父元素的字體大小來進行轉變的單位。
1、em的值并不是固定的；
2、em會繼承父級元素的字體大小。
父節點
例：
<headerstyle="font-size:100px;">//父元素的字體大小是100px
<divstyle="height:1em;width:1em;"></div>//所以子元素的em是1em=100px；
</header>
三、移動端頁面開發技巧：
先調查用戶的使用情況，總結出大部分用戶使用的都是什么設備。
比如：我現在的用戶大多使用的是三種手機，我們先將每種手機的分辨率都從網上找出來。
將他們都羅列出來，然后去寫媒體查詢（因為不同手機分辨率不同，所以用像素的話，會出現顯示的相同，舉個栗子~比如說小朋友吃飯，食堂給小朋友的標配是一個饅頭，可是有的小朋友飯量大，有的飯量小，所以會出現不夠吃或者吃不了造成浪費。怎么避免這種情況呢，所以食堂大媽想了一個主意體重在50斤~60斤的小盆友可以領取到一個饅頭，低于50斤的半個饅頭，體重大于60斤的，兩個饅頭，這三種分配方式。）
我的用戶群體大概是這三種設備
設備名稱分辨率估算字體大小rem與px轉換
iphone5320568font-size：12px；1rem=12px
iphone6375667font-size：14px；1rem=14px
iphone6Plus414*736font-size：16px；1rem=16px
先取出一個中間的設備來做基本樣式的書寫
最開始的書寫可以根據設計圖紙來進行px的書寫（也就是先選擇好饅頭的大小）
優先寫出一套模版，然后基于這套模版去寫別的設備的媒體查詢
在頁面中優先寫出媒體查詢的標簽
<metaname="viewport"content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
width-viewport設備的寬度
height-viewport設備的高度
initial-scale-初始的縮放比例
minimum-scale-允許用戶縮放到的最小比例
maximum-scale-允許用戶縮放到的最大比例
user-scalable-用戶是否可以手動縮放
上面分配好了，按照這種方式寫媒體查詢
html,body{height:100%;margin:0;padding:0;font-size:14px;}//注意初始樣式必須寫在最頂部！！！！如果寫在媒體查詢底部的話就會覆蓋上方的媒體查詢（因為是層疊樣式表嘛~）
@mediascreenand(max-width:320px){
html{font-size:12px;}
}
@mediascreenand(min-width:321px)and(max-width:750px){
html{font-size:14px;}
}
@mediascreenand(min-width:751px){
html{font-size:16px;}
}
因為上面寫好了一套初始模版，因為初始模版都是px的，在文章的開端我們就強調了為什么不能用px了，所以我們要將頁面中的px轉換成相應的rem值
例：
header{
width:140px;//轉化為10rem，因為我們是基于最中間的設備做的，中間設備的font-size：14px，所以140px=10rem。
}
所有用px的高寬全部改成rem這樣就完成了，對三種設備的適配。
讀到這里，這篇“怎么理解CSS中的rem及移動端的布局方法”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
