媒体查询可以针对不同的屏幕大小显示不同的样式
这是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内的字体大小进行变化,通过媒体查询修改字体大小,从而修改整体大小。