手机端自适应方案

REM（手机端自适应方案）

热热身

px 像素
rem (root-em) 也就是根元素HTML的font-size
vh: view height 100vh = 视口高度
vw: view width 100vw = 视口宽度

---

字体统一

不同浏览器有不同的默认字体，所以最好做项目前使用自己的reset.css重置一遍，但是Chorme有默认的最小字号。

---

字体度量

一个元素中：1em = 1个字体的大小
也就是一个大写M的大小（涉及字体度量知识）
知乎这篇写的很好

PC响应式

对不同屏幕大小做不同的样子 - PC端
利用CSS媒体查询

移动端自适应

不同屏幕大小的手机的网页自适应大小 - 移动端
利用控制根元素font-size，使用rem控制大小

---

例如：

iphone - 375 x 667
iphone6+ - 414 x 736
iphone5 - 320 x 568
Nexus 412 x 732

· 响应式

0~320 做一套CSS
320~375 另一套CSS
375~414 第三套CSS

· 自适应

只有一套（越大的手机，显示越大）

方法：

① JS控制HTML的font-size = 屏幕宽度
② CSS中宽高： 0.5rem = 半屏幕宽度
③ 用stylus自定义函数做rem -> px的转换

---

12px原则

html中字体最小为12px
body中的字体用px固定（reset.css）

---

最近的自我总结:

1、最近用vue模仿去哪儿网，踩坑踩的还是很爽的
2、想学的更好必须要强迫自己学英文啊，大部分文档都是英文的（LESS等等）
3、感觉less没有stylus好用，stylus真的是无敌