通过CSS3 实现响应式Web设计的三个步骤

如何通过CSS3 实现响应式Web设计：

分为三个步骤：

（1）允许网页宽度自动调整。首先在页面头部中，我们需要加入这样一行：<meta name="viewport" content="width=device-width, initial-scale=1" />  viewport是网页默认的宽度和高度，网页的宽度默认就等于自己屏幕宽度（width=device-width），并且原始缩放比例（initial-scale=1）为1.0，也就是网页初始大小占屏幕面积的100%。

（2）流式布局。不使用绝对宽度布局和字体大小，也就是css中代码中，定义宽和高的时候不能使用px（width：px）只能使用百分比（width：%）或者（width：auto）定义高宽。定义字体大小也使用相对单位（em），不使用绝对单位（px）。

（3）媒体查询（media query）@media only screen and （max-width：px）max-width就是当屏幕小于等于多少的时候执行而（min-widt）就是当屏幕大于等于多少的时候执行。

转载于:https://www.cnblogs.com/MissZhao/p/5800395.html