PC端和移动端的适配问题

• 响应式：一套代码运用到手机、电脑、平板等不同设备；一个URL适应全部设备；响应式加@media

• 自适应：适应屏幕大小，屏幕大，内容就大，屏幕小内容就小；

• 适配：rem等是单位，不能做适配，弹性盒是布局的方案，不能做适配；适应各种分辨率，使用rem单位，设置html根元素的字体大小，利用媒体查询限制宽度，然后写根元素的大小是多少，如：

html{font-size:10px}
@media screen and (min-width:321px) and (max-width:375px){html{font-size:11px}}
@media screen and (min-width:376px) and (max-width:414px){html{font-size:12px}}

• 前者虽然可以适配，但是也会出现这几个范围的界面不适合，就需要媒体查询更改跟尺寸有关的，就会很多代码；
• 拉勾网：（典型的弹性布局，关键元素宽高和位置不变，只有容器元素在伸缩变化）
• 网易：使用了不同媒体查询情况下font-size不同，但是里面html的font-size不是预先通过媒体查询在css里定义好的，是通过js计算出来的，不过要刷新页面才看出来；
• 淘宝：淘宝无限适配；