媒体查询、移动端、网页响应式布局

1.媒体查询

随着移动设备与互联网的快速普及，用户开始使用各种尺寸的智能手机、平板电脑或者其它设备来浏览 Web 内容，为了确保使用不同设备的用户都能拥有不错的体验就需要用到媒体查询。媒体查询能让 CSS 可以更精确的作用于不同的设备或同一设备的不同条件，并为它们分别定义不同的 CSS 样式，使其契合各个设备的页面大小，当然屏幕的类型由多种 比如电脑屏幕 比如打印机

screen 就表示所有的电脑显示器，@media screen

print 表示打印机的屏幕，@media print

all 表示所有的媒体设备比如电脑屏幕和打印机使用等媒体查询，可以使用@media all

列如：

这句话的意思是，随着网页面拉框的大小，大于600px小于900px时，网页出现下面的css样式

大于等于600 min-width:600px

小于等于900 max-width:900px

 @media screen and (min-width:600px) and (max-width:900px){

            .ul1 > li{

                color: rgb(147, 187, 215);

            }

            .ul1 > .none{

                display: none;

            }

            .ul1 > .item{

                display: block!important;

！important最高级，改变为块元素

            }

        }

注意：如果想要分开写的话，min-width或者max-width设置了同一个数字时，最下面的样式优先

比如：

2.移动端

移动端的页面大小总归是不一样的，手机设备不同，打开的web页面大小也不一样，一个字符的大小也不一定，（我电脑上的浏览器一个字符是16px，有的人就是不一样啦）

使用物理单位（em、rem）在不同宽度和不同分辨率的手机上会有一定的差异 ，我们在这里推荐使用rem或者em 作为移动端的单位 来兼容不同的手机设备，em是相对于父级单位的大小来显示的 但是不够固定 ，我们一般使用rem作为移动端的主流单位，因为rem是相对于根元素html的大小来显示的 html的大小相对固定

假如设置了html最初的font-size：100px后，使用1rem大小就是100px。

假设设计稿中的实际宽度是200px 那么应该换算成多少rem呢？

答：实际宽度是200px / 根元素的100px = 2rem。

这样就可以适应移动端的大小了。

3.网页响应式布局

响应式布局一般在vscode使用html会自动填写在最上面，就是下面这样的。

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

①viewport：即视口，表示网页的可视区域；之前我们学过calc、vh、vw就是视口距离啦

②width：控制 viewport 的大小，可以指定一个具体的值，显示的宽度为设备的宽度；

③initial-scale：表示初始缩放比例，也就是页面第一次加载时的缩放比例，1.0表示不缩放；

④maximum-scale：表示允许用户缩放的最大比例，范围从 0 到 10.0；

⑤minimum-scale：表示允许用户缩放到最小比例，范围从 0 到 10.0；

⑥user-scalable：表示用户是否可以手动缩放，“yes”表示允许缩放，“no”表示禁止缩放。

三者联系：利用媒体查询 实现响应式布局 利用rem移动端兼容