响应式（自适应）布局

1，响应式布局：当浏览器宽度改变时，网页根据宽度变化自动变化成适合人看的布局。比如，当浏览器宽度为1920px时，一排显示6张图片，但是当浏览器宽度为640px时，一排显示3张图片。

2，响应式布局的一些技术点纪录：

(1)允许网页的宽度自动的调整

在网页代码的头部，加入一行viewport元标签。

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

 

viewport是网页默认的宽度和高度，上面这行代码的意思是，网页宽度默认等于屏幕宽度（width=device-width），原始缩放比例（initial-scale=1）为1.0，即网页初始大小占屏幕面积的100%。

(2)尽量少使用绝对的宽度，多点百分比

 

(3)相对大小的字体:字体不要使用px写死，最好使用相对大小的em，或者高清方案rem，这个不限制与字体，别的属性也可以这么设置

 

(4)流式布局，float等float的好处是，如果宽度太小，放不下两个元素，后面的元素会自动滚动到前面元素的下方，不会在水平方向overflow（溢出），避免了水平滚动条的出现。

 

(5)选择加载css，<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 400px)" href="tinyScreen.css" />，这个意思是如果屏幕宽度小于400像素（max-device-width: 400px），就加载tinyScreen.css文件。媒体查询media

(6)利用display:none;和display:line-block切换元素在网页中是否可见。

3，关于viewport:

平时设计的网页宽度px都是css像素，而不是物理像素。在debug可以通过更改dpr:1/2/3来仿真css中1px等于多少物理像素。

通过浏览：viewportsizes.com  网址可以查询各种设备的理想宽度（即做网页时需要的宽度）。

4，弹性布局；

百分比布局使得网页宽度能够随着查看它们的屏幕窗口大小变化，因而得名弹性布局