媒体查询的意义及使用（针对不同的屏幕大小显示不同的样式）

媒体查询可以针对不同的屏幕大小显示不同的样式
这是css3的新特性
语法
ps:写在style内

@media mediatype and|not|only (media feature){
           /*css代码*/
}

参数详解：

• mediatype即媒体类型，可以写成以下任一个

  • all 表示所有设备
  • print表示打印机和打印预览
  • screen 电脑屏幕，平板，手机，最最常用

• and|not|only分别表示： 且|非|某个特定的

• (media feature)：必须用括号包裹，即媒体特性

  • width 可见宽度
  • min-width 最小可见宽度
  • max-width 最大可见宽度

例子

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

外部引入资源的方式：
ps:写在head内，style外哦，参数类似上面不具体说明

<link rel="stylesheet"  href="xxx.css" media="screen and (min-width:320px)">

推荐与rem一起用，可以实现整体变化，因为rem是根据html内的字体大小进行变化，通过媒体查询修改字体大小，从而修改整体大小。