当前位置 : 主页 > 网页制作 > css >

媒体查询

来源:互联网 收集:自由互联 发布时间:2021-06-13
@media screen and (max-width: 800px){ body { background-color: pink; }} @media screen and (max-width: 500px){ body { background-color: red; }} 小于800时是粉色,继续小于500时是红色。 由大到小 用max 由小到大 用min 建议
@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样式
网友评论