自适应media_screen

根据屏幕分辨率进而修改CSS样式

使用方法

<div class="box"/>
<style>
  @media screen and (max-width:600px){
    .box{
      height: 200px;
      width: 200px;
      background-color: blueviolet;
      }
    }
    @media screen and (min-width:1200px){
      .box{
        height: 100px;
        width: 300px;
        background-color: pink;
      }
    }
    @media screen and (min-width:600px) and (max-width:1200px){
      .box{
        height: 100px;
        width: 100px;
        background-color: lightskyblue;
      }
    }
</style>
posted @ 2021-03-29 11:30  bugSource  阅读(33)  评论(0编辑  收藏  举报