响应式设计：根据不同设备引不同css样式

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

上面表示的是：当屏幕小于或等于600px时，将采用small.css样式来渲染Web页面。

<link rel="stylesheet" media="screen and (min-width:900px)" href="big.css" type="text/css"  />

上面表示的是：当屏幕大于或等于900px时，将采用big.css样式来渲染Web页面。

body{
    background-color: #fff;
}
@media screen and (max-width: 600px) {
     body{
         background-color: #ccc;
     }
 } 

上面表示的是：当屏幕小于或等于600px时，背景色显示成灰色。

body{
    background-color: #fff;
}
@media screen and (min-width: 900px) {
     body{
         background-color: #ccc;
     }
 } 

上面表示的是：当屏幕大于或等于900px时，背景色显示成灰色。

转载于:https://www.cnblogs.com/supe/p/6692379.html