响应式布局css样式

ゞ 浴缸里的玫瑰 2022-12-13 04:53 321阅读 0赞 
  1. 头部必写
  2.     <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
  6.     @media screen and (min-width:0px) and (max-width: 480px) {
  7.             body{
  8.                 background: #797;
  9.                 }
  10.             div{
  11.                 width: 48%
  12.             }
  13.         }
  14.         @media screen and (min-width:481px) and (max-width: 1024px) {
  15.             body{
  16.                 background: #aaa;
  17.                 }
  18.             div{
  19.                 width: 31.3333%
  20.             }
  21.         }
  22.         @media screen and (min-width:1025px) and (max-width: 1200px) {
  23.             body{
  24.                 background: #8cc;
  25.                 }
  26.             div{
  27.                 width: 23%
  28.             }
  29.         }
  30.         @media screen and (min-width:1201px) and (max-width: 1920px) {
  31.             body{
  32.                 background: #999;
  33.                 }
  34.             div{
  35.                 width: 23%
  36.             }
  37.             section{
  38.                 width: 1200px;
  39.                 margin:auto;
  40.             }
  41.         }

发表评论

表情：
评论列表 （有 0 条评论，321人围观）

还没有评论，来说两句吧...

相关阅读

    相关 响应式布局

    目录： 1. 响应式布局介绍 2. 响应式布局特点 3. 响应式布局的实现方式 4. 响应式布局媒体查询使用 5. 响应式布局示例 1. 示例1

    快来打我*快来打我*/ 0 赞/ 465 阅读

    相关 用CSS实现响应式布局

    响应式网页看起来高大上，但实际上，不用JS只用CSS也能实现响应式网站的布局 要用到的就是CSS中的媒体查询下面来简单介绍一下怎么运用 使用@media 的三种方式 第一

    红太狼红太狼/ 0 赞/ 338 阅读

    相关 响应式布局

    响应式布局 响应式布局在面对不同分辨率设备灵活性强，在平时的网页设计中基本上都要用到响应式布局设计，它给我们提供了良好的用户浏览页面，能带给我们更好的客户体验，下面给大家分享

    本是古典 何须时尚本是古典 何须时尚/ 0 赞/ 450 阅读