media screen实现响应式布局

 

如果屏幕宽度小于400像素（max-device-width: 400px），就加载tinyScreen.css文件。

　　<link rel="stylesheet" type="text/css"
　　　　media="screen and (max-device-width: 400px)"
　　　　href="tinyScreen.css" />

如果屏幕宽度在400像素到600像素之间，则加载smallScreen.css文件。

<link rel="stylesheet" type="text/css"
　　　　media="screen and (min-width: 400px) and (max-device-width: 600px)"
　　　　href="smallScreen.css" />

 

 

media=“”指定这个css用于何种设备，具体参数如下：

screen：计算机屏幕

print:输出到计算机屏幕

projection:提交到投影机

aural:扬声器

braille:提交到凸字触觉感知设备

tty:电传打字机

tv:电视机

all:所有输出设备

 

1、屏幕小于1460

@media screen and (max-width:1460px) {
.search-box { margin-right: 40px; }
}

2、屏幕小于1024

@media screen and (max-width:1024px) {

.doc-search-box .search-box { width: auto; }
.doc-search-box .search-box input { width: 93%; }

}

3、屏幕大于1024小于1280

@media screen and (min-width:1024px)  and (max-width:1280px){

******

}