网页适配问题

自己对网页自适应有些不足，补充一下。另外区分一下自适应与响应式的区别。
自适应是为了解决如何才能在不同大小的设备上呈现同样的网页
响应式是自动识别屏幕宽度、并做出相应调整的网页设计，布局和展示的内容可能会有所变动

技术选择

可知需要设置大小的样式： width 、 height 、 margin 、 padding 、font-size ，列出来方便思考。
可知技术方案：百分比布局、媒体查询、 rem 、 vw系列 、 flex 。每一项都有自己的优缺点，我们需要结合起来使用。以实验过程来说明一些问题：

只用百分比布局

优点：浏览器大小改变时布局不变。实现了自适应网页
缺点：
- 如果屏幕过小，某个 div 内的内容可能过于拥挤，现在 PC 的屏幕不会太小，一般不会影响，但如果想要手机端或者平板访问此网页，效果可想而知。
- 如果屏幕过大，某个 div 内的内容可能过于稀少，那么我们需要字体同步放大，需要图片或其他媒体资源同步放大

加上媒体查询
百分比布局加上这个就可以实现响应式布局，这儿有很多案例

优点：可以根据 @media 查询设置不同的样式，甚至布局。这样移动端通过修改布局也可以得到好的体验。
缺点：要多写好几倍的 css

锦上添花
理论上上面的两个已经可以解决布局问题，但现实中你可能没有时间写那么多的 css。那我们需要其他好东西。

rem ：根据网页的根元素来设置字体大小。现代浏览器默认的根元素字体大小是 font-size: 16px。
设置这个可以让不同屏幕下的字体大小同步缩放，也可以设置给 width、 padding 、 margin。但不同的屏幕下需要给 html 节点设定不同的 font-size 基准值。下面是几种方式：

配合 @media,例如：网易新闻

手机的屏幕宽度： iphone5 是 320px ， iphone6/7/8/X 是 375px ， iphone6/7/8 plus 是 414px ，下面是部分代码

@media screen and (max-width: 320px) {
    html {
        font-size:42.667px;
        font-size: 13.33333vw
    }
}

@media screen and (min-width: 361px) and (max-width:375px) {
    html {
        font-size:50px;
        font-size: 13.33333vw
    }
}

@media screen and (min-width: 413px) and (max-width:414px) {
    html {
        font-size:55.2px;
        font-size: 13.33333vw
    }
}

上面的 font-size 是由屏幕宽度/7.5 得到的，网易新闻的设计图应该是 750px 的，除以 7.5之后 font-size 就是 100px ，方便其他元素的计算。子元素都是通过 rem 设的宽高等，因为 414:375:320 = 55.2:50:42.667 ，所以在 320px、375px、414px下显示的效果是一样的，上面还用了 vw ，如果浏览器支持的话，可以不使用 @media ，直接设置 html: {font-size: 13.33333}vw， 13.33333 是通过 100/7.5 得到的。然后根据设计图将 px 换算为 rem 就行了，你也可以修改 7.5 为其他值，比如说 10 。

js 动态计算

1 2	/* 在 window.resize 方法里也要添加下面这条命令 */ document.documentElement.style.fontSize = window.innerWidth / 10 + 'px';

利用calc 自动计算

可以直接设置 html: {font-size: 13.33333}vw ，好粗暴。张鑫旭大神有实践大型项目后的样式：

html {
    font-size: 16px;
}

@media screen and (min-width: 375px) {
    html {
        /* iPhone6的375px尺寸作为16px基准，414px正好18px大小, 600 20px */
        font-size: calc(100% + 2 * (100vw - 375px) / 39);
        font-size: calc(16px + 2 * (100vw - 375px) / 39);
    }
}
@media screen and (min-width: 414px) {
    html {
        /* 414px-1000px每100像素宽字体增加1px(18px-22px) */
        font-size: calc(112.5% + 4 * (100vw - 414px) / 586);
        font-size: calc(18px + 4 * (100vw - 414px) / 586);
    }
}
@media screen and (min-width: 600px) {
    html {
        /* 600px-1000px每100像素宽字体增加1px(20px-24px) */
        font-size: calc(125% + 4 * (100vw - 600px) / 400);
        font-size: calc(20px + 4 * (100vw - 600px) / 400);
    }
}
@media screen and (min-width: 1000px) {
    html {
        /* 1000px往后是每100像素0.5px增加 */
        font-size: calc(137.5% + 6 * (100vw - 1000px) / 1000);
        font-size: calc(22px + 6 * (100vw - 1000px) / 1000);
    }
}

vw系列 : vw 代表屏幕的可见宽度，类似的还有 vh 、 vmin 、 vmax 。百分比宽度是根据父节点的宽度设定的，当嵌套多层之后，用 vw 比较方便。如果浏览器都支持 vw 的话，完全可以用 vw 取代 rem ，上面网易新闻的 demo 还用 vw 来设定 html 的 font-size
flex: 让子元素成比例，垂直居中…等等，不要太方便