rem单位

rem是CSS3新增的相对长度单位，是指相对于根元素（html）的font-size计算值的大小。比如，font-size: 12px，10rem就等于120px。

媒体查询

  1. 媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。媒体查询可用于检测的媒体特性有 width、height 和 color 等。通过媒体查询，可以在不改变页面内容的情况下，为特定的一些输出设备定制显示效果。其语法为：
  1. @media mediatype and|not|only (media feature) {
  2.     CSS-Code;
  3. }
  • mediatype描述设备的一般类别。它可以是： | mediatype | 解释说明 | | —- | —- | | all | 用于所有设备 | | print | 用于打印机和打印预览 | | screen | 用于电脑屏幕，平板电脑，智能手机等 |
  • 逻辑操作符 | 逻辑操作符 | 解释说明 | | —- | —- | | and | 用于将多个媒体查询规则组合成单条媒体查询，当每个查询规则都为真时则该条媒体查询为真，它还用于将媒体类型与媒体特性结合在一起。 | | not | 用于否定媒体查询，如果不满足这个条件则返回true，否则返回false。not 只能在媒体查询的开头使用 | | only | 仅在整个查询匹配时才用于应用样式，并且对于防止较早的浏览器应用所选样式很有用。
    比如：@import url(new.css) only all。在支持媒体查询的浏览器中，only 会被忽略；在不支持媒体查询的浏览器中，媒体类型为only all，这是无效的。 | | , | 逗号用于将多个媒体查询合并为一个规则。 逗号分隔列表中的每个查询都与其他查询分开处理。因此，如果列表中的任何查询为true，则整个media语句均返回true。（相当于or） |
  • (media feature)描述了用户代理、输出设备，或是浏览环境的具体特征。媒体特性表达式是完全可选的，它负责测试这些特性或特征是否存在、值为多少。每条媒体特性表达式都必须用括号括起来。主要有： | media feature | 解释说明 | | —- | —- | | width | 定义输出设备中页面可见区域的宽度 | | min-width | 定义输出设备中页面最小可见区域宽度 | | max-width | 定义输出设备中页面最大可见区域宽度 |
  1. 一个例子：
@media screen and (max-width: 980px) {
    body {
        background-color: skyblue;
    }
}

表示最大宽度为980px（<=980px）的屏幕设备应用样式。

通过标签引入媒体查询

当页面需要适配不同尺寸的设备时，可以通过标签引入媒体查询。根据不同的设备类型，引用不同的css文件。其语法为：

<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">

引入媒体查询的方法总结

  • link 元素的media属性
  • @media 声明的媒体描述部分
  • @import 声明的媒体描述部分
  • style元素的 media 属性

rem+媒体查询实现元素动态变化

使用媒体查询根据不同设备按比例设置html的字体大小，然后页面元素使用rem做尺寸单位，当html字体大小变化元素尺寸也会发生变化，从而达到等比缩放的适配。

 @media screen and (min-width: 320px) {
     html {
         font-size: 50px;
     }
 }

 @media screen and (min-width: 640px) {
     html {
         font-size: 100px;
     }
 }