# 移動端佈局：流式佈局 、rem佈局、響應式佈局

## 流式佈局 （通過 viewport + flex + px）

## rem 佈局

1.rem 單位

1. em：是一個相對單位，1em 等於當前元素或父元素的 font-size 值

2. rem：是一個相對單位，1rem 等於根元素的 font-size 值

3. vw / vh：把螢幕分為 100 份，1vw 等於螢幕寬的 1%

2. 通過 js 動態設定 font-size

var fontsize = document.documentElement.clientWidth / 3.75

document.documentElement.style.fontSize 
 
= fontsize + 'px'

3. 通過 vw動態設定 font-size，通過 px to rem 設定 font-size 大小，然後 alt+z 轉換單位

html{font-size : 26.666667vw }
bofy{font-size : 16px }
注意：要給 body 重置一下 font-size : 16px ， 避免 html 上的 font-size 對頁面造成影響

## 響應式佈局
利用媒體查詢，即 media queries，可以針對不同的媒體型別定義不同的樣式，從而實現響應式佈局

1. 媒體型別

取值              含義
all              用於所有裝置
print            用於印表機或列印預覽
screen           用於電腦螢幕，平板電腦，智慧手機等
speech           應用於螢幕閱讀器等發聲裝置


2. 常見選項

媒體型別
and、not
min-width、max-width
orientation:portrait（縱屏）、orientation:landscape（橫屏）
<link>
 

3. 例子

@media all and (min-width:500px) and (max-width:700px) { #box{background:blue }}

@media not all and (min-width:500px) {#box{background:blue}}

@media all not ( orientation:portrait ){ #box{ background:yellow } }

@media all not ( orientation:landscape ){ #box{ background:yellow } }

4. 例子 

<link rel="stylesheet" href="base.css" media=" all and (orientation:portrait)">