【web】响应式

viewport

viewport是：初始化页面元素，防止页面被缩放，规范用户操作。

• width=device-width（设置宽度为屏幕宽度）
• maximum-scale=1.0（最大缩放比例为1.0）
• minimum-scale=1.0（最小缩放比例为1.0）
• user-scalable=no（禁止用户捏合操作）
• initial-scale=1.0（初始化的缩放比例）

百分比布局

没有定位的情况

1. 宽高设置百分比相对于父元素的宽高；
2. margin和padding相对于父元素的宽度 。

有定位情况：

1. 宽高设置百分比相对于定位父元素的宽高；
2. left和right相对于定位父元素的宽度；
   ​ top和bottom相对于定位父元素的高度。

• vw和vh相对于浏览器可视窗口的大小，和父元素没有关系。

媒体查询

• 媒体查询：最小宽度：min-width ( >=) 最大宽度：max-width (<=)（浏览器窗口）
• 在不同的屏幕大小下定制样式
• @media screen and(min-width:宽度){样式}:大于某个值时的样式
• @media screen and(max-width){样式}:小于某个值的样式
• @media screen and(min-width)and(max-width){样式}:在最大值和最小值内的样式
• @media not screen and(min-width)and(max-width){样式}:除某个范围内样式
• 可以使用link引入外部文件link的media属性中写媒体查询
  • eg:<link rel=“stylesheet” media="screen and (max-width:800px)"href="11.css
• 补充
  • 浏览器大小使用min-width和max-width判断
  • 屏幕大小使用min-device-width和max-device-width判断

内部引入

		@media screen and (min-width:1200px) {
            div{
                background-color: pink;
            }
            #bigpc{
            display: block;
            }
        }

外部引入

<link rel="stylesheet" href="css/ipad.css" media="screen and (min-width:768px) and (max-width:920px)">

em和rem

• em相对于最近的父元素的font-size的大小
• rem相对于html的font-size的大小