css媒体查询做适配

蓝色火焰6

已于 2024-01-04 20:19:51 修改

阅读量519

点赞数 9

文章标签： css 媒体前端

于 2024-01-04 20:19:02 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_59089605/article/details/135395296

版权

<style>
      @media (max-width: 768px) {
      /* 在屏幕宽度小于768px时应用的样式 */
      #box{
        width: 500px;
        height: 500px;
        background: red;
      }
    }

    @media (min-width: 768px) and (max-width: 1024px) {
      /* 在屏幕宽度在768px到1024px之间应用的样式 */
         #box{
        width: 1024px;
        height: 1024px;
        background: green;
      }
    }

    @media (min-width: 1024px) {
      /* 在屏幕宽度大于1024px时应用的样式 */
         #box{
        width: 1500px;
        height:1500px;
        background: rebeccapurple;
      }
    }
 </style>