媒体查询、理想视口及移动端单位

一、媒体查询

@media screen and ()  and()  ...{       }

@media 表示媒体查询

   屏幕的类型由多种 比如电脑屏幕 比如打印机

        screen 就表示所有的电子设备的屏幕

        print 表示打印机的屏幕

        如果想所有的设备比如电脑屏幕和打印机都使用媒体查询以及其他的屏幕

        可以使用@media all

max-width 表示小于等于这个宽度的时候屏幕显示
min-width  表示大于等于这个宽度的时候屏幕显示

 表示大于等于700     字体颜色都变成红色

 表示所有的屏幕（用了all）尺寸小于或★等于500px 大于或者等于600px之间

                                     除了第一个的文字显示之外其他的都隐藏 再把展开按钮显示出来

设置min-width和max-width都设500px，那么在500px的时候为 什么颜色？

 

    因为min-width和max-width都有等于的作用 ，同时写

     当屏幕是500px的时候谁写在最下面谁生效  原因是上面的被下面的覆盖了  

二、理想视口

          meta name="viewport" 理想视口  

          width=device-width 显示的宽度为设备的宽度

            initial-scale=1.0 是否对屏幕的尺寸进行缩放 1.0表示不缩放 

所以<meta name="viewport" content="width=device-width, initial-scale=1.0">得有

 三、移动端单位

使用物理单位在不同宽度和不同分辨率的手机上会有一定的差异 

        我们在这里推荐使用rem或者em 作为移动端的单位 来兼容不同的手机设备 

        em是相对于父级单位的大小来显示的 不够固定

        rem是相对于根元素html的大小来显示的 html的大小相对固定

        我们一般使用rem作为移动端的主流单位

 第一步，先安装 

第二步，基准字体大小

 

 

 第三步，保持和插件设置的字体大小一致设置 

      后面的32px是直接换算的，告诉你2rem等于32px 

 小技巧：

  : 加上 空格写完具体的大小 会有插件响应的提示 点击一下即

       选择即可