Responsive Layouts(响应式布局)

1.媒体查询的应用：

1. 在html的style的标签中使用

<style>
        @media(min-width: 500px)(max-width: 600px){
     
     
            
        }
 </style>

2. 用link标签引用css文件来做

<link rel="stylesheet" media="screen and (min-width:600px)" href="">

2.rem，em，vh,vm的应用与区别

1. 对于em来说，他是根据最近的父元素的font-size来进行转换的。在元素嵌套时会发生单位转换的问题。因此建议使用rem。它是根据根元素的font-size来进行转换的。
2. 对于vh和vm来说，通过对它们的使用会解决在不同的设备大小而显示不同的问题。