每日一题【CSS-能否简述一下如何使一套设计方案，适应不同的分辨率，有哪些方式可以实现？】2020-12-06

能否简述一下如何使一套设计方案，适应不同的分辨率，有哪些方式可以实现？

答：

1.流式布局

使用非固定像素来定义网页内容，也就是百分比布局，通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充。
这样的布局方式，也就是移动web开发使用的常用布局方式。这样的布局可以适配移动端的不同分辨率设备。

2.响应式开发

css3中的媒体查询，通过查询screen的宽度来指定某个宽度区间的网页布局，
超小屏幕（移动设备） 768px 以下
小屏设备 768px-992px
中等屏幕 992px-1200px
宽屏设备 1200px 以上
由于响应式开发显得繁琐些，一般使用第三方响应式框架来完成，比如 bootstrap 来完成一部分工作，当然也可以自己写响应式

3.flex布局

display:flex，不仅适用于移动端，网页版也很ok，不过现阶段一般会使用rem+flex一起使用

4.rem布局开发

rem:根据html的font-size值的变化而变化
方法：通过css3的媒体查询、js动态改变、flexible插件

felxible（淘宝的rem解决方式-开源）：https://github.com/amfe/lib-flexible

rem布局详情
rem通过js控制代码1
rem通过js控制代码2
rem通过js控制代码3

5.vw/vh布局（目前兼容性较差）

vw:1vw等于视口宽度的1%。
vh:1vh等于视口高度的1%
vh and vw：相对于视口的高度和宽度，而不是父元素的（CSS百分比是相对于包含它的最近的父元素的高度和宽度）。1vh 等于1/100的视口高度，1vw 等于1/100的视口宽度。
比如：浏览器高度950px，宽度为1920px, 1 vh = 950px/100 = 9.5 px，1vw = 1920px/100 =19.2 px。