移动端布局：流式布局 、rem布局、响应式布局

# 移动端布局：流式布局 、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)">