css3 media媒体查询

2019独角兽企业重金招聘Python工程师标准>>>

语法

@media Media-Type Media-Query (Media-Feature) {
    CSS-Code;
}

Media-Type媒体类型，常见的有all，screen（屏幕），print（打印机）等；

Media-Query媒体查询添加，包括and，not（排除某种媒体），only（限制某种媒体）；

Media-Feature媒体特征，常用的是min-width，max-width最小最大判断条件；

###1 最常用的引入方式

link方式

<link rel="stylesheet" type="text/css" href="" media="screen">

@media引入

@media screen {
    
}

###2 媒体特性使用

Max Width

@media screen  and (max-width: 960px){
    //表示当屏幕小于或等于960px的时候，将采用此样式
}

Min Width

@media screen and (min-width: 960px) {
    //表示当大于或等于960px的时候，讲采用此样式
}

多条件

@media screen and (min-width:900px) and (max-width:960px) {
    //表示当位于900~960px区间时，采用此样式
}

上面所说的是浏览器宽度

设备可视区宽度Device Width

@media screen add (max-device-width: 480px) {
    //此样式适用于最大设备宽度为480px
}

转载于:https://my.oschina.net/u/1249401/blog/756818