day10

Posted 2020-08-13

  一、CSS实现响应式布局

    1、CSS中的Media Query（媒介查询）是什么？

　　通过不同的媒体类型和条件定义样式表规则。媒体查询让CSS可以更精确作用于不同的媒体类型和同一媒体的不同条件。媒体查询的大部分媒体特性都接受 min和max用于表达”大于或等于”和”小与或等于”。如：width会有min-width和max-width媒体查询可以被用在CSS中的 @media和@import规则上，也可以被用在html和XML中。通过这个标签属性，我们可以很方便的在不同的设备下实现丰富的界面，特别是移动设备，将会运用更加的广泛。

　　2、语法结构及用法

　　@media 设备名 only （选取条件） not （选取条件） and（设备选取条件），设备二{sRules}

　　例：在link中使用@media：

　　<link rel=“stylesheet” type=“text/css” media=“only screen and （max-width： 480px），only screen and （max-device-width： 480px）” href=“link.css”/>

　　上面使用中only可省略，限定于计算机显示器，第一个条件max-width是指渲染界面最大宽度，第二个条件max-device-width是指设备最大宽度。
    
     3.内嵌的样式中的写法：
       
       例：@media screen and (min-width:768px)and (max-width:999px){
}

     二、px、rem、em的区别
      
      1em=16px（浏览器默认值）针对于body并且会继承。

      1rem=16px针对于根元素HTML并且不会继承。