CSS III 移动端

一、响应式

---

非响应式直接切换html或url

1、手机端页面的做法    （media query）

@media (max-width:320px){

       body{font-size:16px;}

}

2、手机端要加一个 meta

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

3、手机端的交互方式不一样

没有 hover

有 touch 事件

没有 resize

没有滚动条

---

二、动态REM

---

手机专用的自适应方案

1、基本概念

em：一个m的宽度，一个汉字的宽度；

rem：根元素html的font-size（16px）；

vh：viewport height；

vw：viewport width；

chrome最小12px

---

2、手机端方案的特点

i.所有手机显示的界面都是一样的，就是大小不同；

ii. 1rem ==html font-size == viewport width

3、使用JS动态调整REM

var pageWidth = window.innerWidth

document.write('<style>html{font-size:'+pageWidth+'px;}</style>')

---