<html>
<head>
//当设备屏幕最大宽度小于1024px时加载如下CSS内容
@media screen and (max-width: 1024px){
body{
width:1024px;
}
#main{
background-image:url(img/bg1.jpg);
}
}
//all代表所有类型的设备
@media all and (max-width: 1024px){
body{
width:1024px;
}
#main{
background-image:url(img/bg1.jpg);
}
}
//简写
@media and (max-width: 1024px){
body{
width:1024px;
}
#main{
background-image:url(img/bg1.jpg);
}
}
//可以使用and, or, not进行运算
//判断方向是否为纵向
@media and (max-width: 1024px) and (orientation:portrait){
body{
width:1024px;
}
#main{
background-image:url(img/bg1.jpg);
}
}
</head>
<body>
<div id=”main”>
</div>
</body>
</html>
记录下来，留待后查，也方便别人。
2016.7.25
11:38