响应式布局

响应式布局

一、viewport

1.什么是viewport？

初始化页面元素、防止页面被缩放、规范用户操作

2.属性：

（1）width=device-width 设置宽度为屏幕宽度

（2）maximum-scale=1.0 最大缩放比例为1.0

（3）minimum-scale=1.0 最小缩放比例为1.0

（4）user-scalable=1.0 禁止用户捏合操作

（5）initial-scale=1.0 初始化缩放比例

二、百分比布局

1.宽高百分比相对于父元素的宽高

2.magin和padding的百分比相对于父元素的宽度

3.定位的百分比相对于他的参照物

三、媒体查询

1.作用

（1）@media screen and（min-width：宽度）{样式}：大于某个值时的样式

（2）@media screen and（max-width：宽度）{样式}：小于某个值时的样式

（3）@media not screen and（min-width）and （max-width）{样式}：除某个范围内的样式

（4）@media screen and（min-width）and （max-width）{样式}：在最大值和最小值内的样式

2.补充

（1）可以使用link引入外部文件link的media属性中写媒体查询

（2）浏览器大小使用min-width和max-width判断

（3）屏幕大小使用min-device-width和max-device-width判断

四、em和rem

1.em：

相对于最近的父元素的font-size的大小

2.rem：

相对于html的字体大小

五、vw和vh

相对于可视窗口的大小