目前在空闲时间随便播写了个网站，想要做成响应式的类型，顺便过下适配方面的知识点。
什么是viewport?
适配在手机上，首先要理解viewport viewport 是用户网页的可视区域。
手机浏览器是把页面放在一个虚拟的"窗口"（viewport）中，通常这个虚拟的"窗口"（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。
常用的适配代码：定义页面宽度等于设备宽度，默认缩放比例为1.0，禁止用户手动缩放页面
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
还有其他属性
| 属性 | 解释 |
|---|---|
| width | 控制 viewport 的大小，可以指定的一个值，如 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。 |
| height | 和 width 相对应，指定高度。 |
| initial-scale | 初始缩放比例，也即是当页面第一次 load 的时候缩放比例。 |
| maximum-scale | 允许用户缩放到的最大比例。 |
| minimum-scale | 允许用户缩放到的最小比例。 |
| user-scalable | 用户是否可以手动缩放 |
常用屏幕分辨率
以下的屏幕分辨率应该可以兼容百分之90的屏幕了
@media (min-width: 320px)
@media (min-width: 360px)
@media (min-width: 375px)
@media (min-width: 386px)
@media (min-width: 393px)
@media (min-width: 401px)
@media (min-width: 750px)
@media (min-width: 1024px)
@media (min-width: 1100px)
@media (min-width: 1280px)
@media (min-width: 1366px)
@media (min-width: 1440px)
@media (min-width: 1680px)
@media (min-width: 1920px)
stylus的适配方案
最近在做一个官网，正好看下stylus这个css预处理器，对与屏幕适配我认为很棒了，而且相对来说比较简单。
首先定义变量
定义变量：
@media (min-width: 750px)
$fontSize = 12px
@media (min-width: 1024px)
$fontSize = 16px
使用：
.header
font-size $fontSize
如此，header的字体大小就可以根据屏幕分辨率不同进行变化。 未完待续。。。
