css3 media媒体查询

语法css

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

Media-Type媒体类型,常见的有all,screen(屏幕),print(打印机)等;浏览器

Media-Query媒体查询添加,包括and,not(排除某种媒体),only(限制某种媒体);code

Media-Feature媒体特征,经常使用的是min-width,max-width最小最大判断条件;语法

###1 最经常使用的引入方式查询

link方式样式

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

@media引入di

@media screen {
    
}

###2 媒体特性使用vi

Max Widthco

@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
}
相关文章
相关标签/搜索