关于响应式布局的总结

针对不同的屏幕分辨率应该用不同的CSS样式。

比如在电脑、iPad上，屏幕比较宽，就可以一行放多个div。到了手机上，或者Pad竖着拿的的时候，一行就只放1到2个div就差不多了。这样在移动设备上，无论是字体大小还是页面布局就不会显得很局促。一切都是为了客户的体验度。

知识点一：

meta标签设置

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

  网页宽度默认等于屏幕宽度(width=device-width),原始缩放比例(initial-scale=1.0),即网页初始大小占屏幕面积的100%。

<meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,maximum-scale=1.0,user-scalable=no">

maximum-scale=1.0,minimum-scale=1.0;可视区域的缩放级别,maximum-scale用户可将页面放大的程序，1.0将禁止用户放大到实际尺寸之上,minimum-scale=1.0当然就是禁止缩小了。user-scalable:是否可对页面进行缩放，no 禁止缩放.

知识点二：

知识点二不使用绝对宽度和字体。

知识点三：

图片缩放和流式布局。

知识点四：

media query媒体查询。