# 响应式Web设计

主要是应用在官网的设计，

# 实现方式

# 媒体查询

CSS3媒体查询可以让我们针对不同的媒体类型定义不同的样式，当浏览器窗口变化的过程中，页面会根据浏览器的宽度和高度重新渲染页面。

定义浏览器的分隔点，可以参考bootstrap或者其他更细致的方案。

移动优先还是pc优先，暂时还没有看到有实质的区别。

# 百分比布局

Bootstrap的栅格布局原理就是百分比，CSS3支持最大最小长度值，可以将百分比和max(min)一起结合使用。

# 缺点

计算困难，如果按照设计稿定义元素宽高，必须换算成百分比单位。
各个属性中如果使用百分比，相对父元素的属性并不是唯一的。比如width和height相对父元素的width和height，儿margin和padding无论垂直还是水平方向都是相对父元素的宽度、border-radius则是相对自身宽度，造成我们使用百分比单位容易造成布局问题变得复杂。

# rem布局

# 视口单位

# 参考

← 常用的布局实现