媒体查询

@media screen and (max-width: 800px){
　　　body {
　　　　background-color: pink;
　　}
}

@media screen and (max-width: 500px){
　　　body {
　　　　background-color: red;
　　}
}

小于800时是粉色，继续小于500时是红色。
由大到小 用max
由小到大 用min

建议从小到大

 

动态加载css

<link rel="stylesheet"  href="style320.css" media="screen and (min-width: 320px)">

<link rel="stylesheet"  href="style640.css" media="screen and (min-width: 640px)">

当屏幕小于640时会加载style320.css样式
当屏幕大于640时会加载style640.css样式