Css3 Media Query

Css3 Media Query 

常见的属性:

device-width，device-height-----屏幕宽高（物理）
width，height -----渲染窗口宽高（浏览器）
orientation -----设备方向（横屏、竖屏）
resolution -----设备分辨率

基本的语法

外联、内嵌
001.外联
<link type="text/css" rel="stylesheet" href="link.css" media="only screen and (max-width:480px)"/>
→ 当屏幕的宽度小于等于480px时，使用这个css

002.内嵌
<style>
@media screen and (min-width:480px){
body{background:blue;}
}
</style>
→ 当屏幕的宽度大于480px时，使用这个css

针对移动端设备做的适配

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

html {

font-size: 20px;

}

}

 

@media only screen and (min-width: 321px) and (max-width: 360px) {

html {

font-size: 22.5px;

}

}

 

@media only screen and (min-width: 361px) and (max-width: 375px) {

html {

font-size: 23.4px;

}

}

 

@media only screen and (min-width: 376px) and (max-width: 414px) {

html {

font-size: 25.8px;

}

}

 

@media only screen and (min-width: 415px) and (max-width: 479px) {

html {

font-size: 27px;

}

}

 

@media only screen and (min-width: 480px) {

html {

font-size: 30px;

}

}

 

@media only screen and (min-width: 768px) {

html {

font-size: 32px;

}

}