移動端配適與掌握動態 REM

摘要： media query ：自動探測螢幕型別及寬度，符合條件時載入 css 樣式。 link 標籤中的 css 媒體查詢： <link rel="stylesheet" href="style1.css" media="(min...

media query ：自動探測螢幕型別及寬度，符合條件時載入 css 樣式。

link 標籤中的 css 媒體查詢：

<link rel="stylesheet" href="style1.css" media="(min-width: 400px) and (max-width: 1000px)">
// 當螢幕大於 400px 並且小於 1000px 時，引用 style1.css 樣式表
複製程式碼

html 中的 css 媒體查詢：

<script>
@media( min-width: 400px and max-width: 800px){
body{
background: red;
}
}
</script>
// 當螢幕大於 400px 並且小於 1000px 時，body 的背景色為紅色
複製程式碼

meta viewport

開發移動端介面時，一定要加這句程式碼：

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
複製程式碼

viewport
width=device-width
user-scalable=no
initial-scale=1.0
maximum-scale=1.0
minimum-scale=1.0

移動端特點

hover
touch
resize

動態 REM

REM

在 css 中有很多長度單位，比如：

• px 表示一個畫素點；
• em 表示元素的font-size的計算值（一個M的寬度）；
• vh 視口高度的 1/100；
• vw 視口寬度的 1/100。

rem 也是一個長度單位，這個單位代表根元素（html）的font-size 的大小。

em 和 rem 的區別：em 取自己的font-size 計算值，rem 取根元素的font-size 計算值。

網頁上的字型大小預設是16px 。

移動端方案的特點

• 所有手機顯示的介面都是一樣的，只是大小不同
• 1 rem == html font-size == viewport width

使用 JS 動態調整 REM

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 <script>
var pageWidth = window.innerWidth
document.write('<style>html{font-size:'+pageWidth+'px;}</style>')
 </script>
複製程式碼

上面程式碼，將根元素的font-size 設定為裝置寬度。寫頁面的時候，直接使用 rem 單位作為長度單位，便可以實現自適應佈局。

REM 可以與其他單位同時存在

font-size: 16px;
 border: 1px solid red;
 width: 0.5rem;
複製程式碼