【web】响应式

viewport（响应式）

一、百分比

1.1、没有定位的情况：

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

1.2、有定位情况：

1. 宽高设置百分比相对于定位父元素的宽高；
2. left和right相对于定位父元素的宽度；top和bottom相对于定位父元素的高度。vw和vh相对于浏览器可视窗口，和父元素没有关系。

二、媒体查询

• 媒体查询：最小宽度：min-width 最大宽度：max-width（浏览器窗口）

2.1、内部引入

eg：

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

2.2、外部引入

eg：

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