媒体查询

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

@media screen and (max- 500px){
   body {
    background-color: red;
  }
}
小于800时是粉色,继续小于500时是红色。
由大到小 用max
由小到大 用min

建议从小到大

动态加载css

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

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

当屏幕小于640时会加载style320.css样式
当屏幕大于640时会加载style640.css样式
原文地址:https://www.cnblogs.com/flyerya/p/11360052.html