淺談css3長度單位rem，以及移動端佈局技巧

時間 2019-12-01

標籤淺談 css3 css 長度單位 rem 以及移動佈局技巧欄目 CSS 简体版

原文原文鏈接

rem是什麼？css

rem是css3中新增長的一個單位屬性(font size of the root element),根據頁面的根節點的字體大小進行轉變的單位。root！！！！！！！！！根節點，也就是html。html

例：(下面例子中的根節點是html ，它的字體大小是100px，因此根節點下面的元素所設置的rem，都是1rem=100px。)
rem的初始值是16px，也就是說在沒有設置根節點的font-size的時候，1rem=16pxcss3

<html>
    <head>
        <style>
            html,body{ font-size: 100px;  }
            header{ height: 1rem;width: 1rem;  }  
        </style>
    </head>
    <body></body>
    <header></header>
</html>

em是什麼iphone

em也是一個相對單位，em單位是根據父元素的字體大小來進行轉變的單位。字體

em的值並非固定的；scala
em會繼承父級元素的字體大小。

父節點
例：設計

<header style="font-size:100px;">//父元素的字體大小是100px
    <div style="height:1em;width:1em;"></div>//因此子元素的em是1em=100px；
</header>

移動端頁面開發技巧：code

先調查用戶的使用狀況，總結出大部分用戶使用的都是什麼設備。
好比：我如今的用戶大多使用的是三種手機，咱們先將每種手機的分辨率都從網上找出來。htm

將他們都羅列出來，而後去寫媒體查詢（由於不一樣手機分辨率不一樣，因此用像素的話，會出現顯示的相同，舉個栗子~ 好比說小朋友吃飯，食堂給小朋友的標配是一個饅頭，但是有的小朋友飯量大，有的飯量小，因此會出現不夠吃或者吃不了形成浪費。怎麼避免這種狀況呢，因此食堂大媽想了一個主意體重在50斤~60斤的小盆友能夠領取到一個饅頭，低於50斤的半個饅頭，體重大於60斤的，兩個饅頭，這三種分配方式。）繼承

個人用戶羣體大概是這三種設備
設備名稱分辨率估算字體大小 rem與px轉換
iphone5 320568 font-size：12px； 1rem=12px
iphone6 375667 font-size：14px； 1rem=14px
iphone6 Plus 414*736 font-size：16px； 1rem=16px

先取出一箇中間的設備來作基本樣式的書寫
最開始的書寫能夠根據設計圖紙來進行px的書寫（也就是先選擇好饅頭的大小）
優先寫出一套模版，而後基於這套模版去寫別的設備的媒體查詢

在頁面中優先寫出媒體查詢的標籤

<meta name="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;}//注意初始樣式必須寫在最頂部！！！！若是寫在媒體查詢底部的話就會覆蓋上方的媒體查詢（由於是層疊樣式表嘛~）
@media screen and (max-width:320px ) {
    html{font-size: 12px;}
}
@media screen and (min-width:321px) and (max-width:750px ) {
    html{font-size: 14px;}
}
@media screen and (min-width:751px ) {
    html{font-size: 16px;}
}

由於上面寫好了一套初始模版，由於初始模版都是px的，在文章的開端咱們就強調了爲何不能用px了，因此咱們要將頁面中的px轉換成相應的rem值

例：

header{
    width:140px;//轉化爲10rem，由於咱們是基於最中間的設備作的，中間設備的font-size：14px，因此140px=10rem。
}

全部用px的高寬所有改爲rem這樣就完成了，對三種設備的適配

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。