6响应式布局

qq_47670443

于 2022-04-28 20:57:17 发布

阅读量105

点赞数 1

分类专栏：重学前端基础冲击高薪

本文链接：https://blog.csdn.net/qq_47670443/article/details/124476743

版权

响应式布局媒体查询 CSS3 断点栅格系统

关键词由CSDN通过智能技术生成

重学前端基础冲击高薪专栏收录该内容

18 篇文章 1 订阅

订阅专栏

1什么是响应式布局

1.1.网页可以根据不同的设备或窗口大小呈现出不同的效果

1.2.使用响应式布局可以使一个网页适配所有设备

1.3.响应式布局的关键就是媒体查询

1.4.通过媒体查询可以为不同的设备、设备的不同状态来分别设置样式。

案例1：通过媒体查询，控制不同视口宽度时的盒子大小

<style>
    /* 当视口宽度大于500px时，才会生效*/
    @media(min-width:500px) {
      .box {
        width: 200px;
        height: 200px;
        margin: 0 auto;
        background-color: pink;
      }

    }
/* 当视口宽度小于800时才会生效 */
    @media(max-width:800px){
      .box{
        width:400px;
        height:400px;
        margin:0 auto;
        background-color:pink;
      }
    }
  </style>
</head>

<body>
  <div class="box">

  </div>
</body>

</html>

当视口宽度大于800px时

当视口宽度小于500时

而介于500px到800px之间时，两个样式都不生效。空白

2什么是媒体特性

（Media features):

　媒体特性是CSS3新增的内容，多数媒体属性带有“min-”和“max-”前缀，用于表达“小于等于”和“大于等于”。比如：width(渲染区宽度)、device-width(设备宽度)等，主要用于判断。

3 多媒体特性的连接方式

not:表示非 and:表示与 ,: 表示或

4一般比较常用的断点：
                       <768 超小屏幕，一般是手机 max-width=768px
                       >768     小屏幕           min-width=768px
                       >992 中型屏幕（一般为pad） min-width=992px
                       >1200 电脑屏幕           min-width=1200px

<style>
        /*
            默认网页背景色是灰色
            屏幕宽度在768-992之间, 网页背景色是粉色
            屏幕宽度在992-1200之间, 网页背景色是skyblue
            屏幕宽度大于1200, 网页背景色是绿色

         */
        body {
            background-color: gray;
        }

        /* 大于等于768 为粉色 */
        @media (min-width:768px) {
            body {
                background-color: pink;
            }
        }

        /* 大于等于992 为蓝色 */
        @media (min-width:992px) {
            body {
                background-color: skyblue;
            }
        }

        /* 大于等于1200 为绿色 */
        @media (min-width:1200px) {
            body {
                background-color: green;
            }
        }
    </style>
</head>

5响应式布局原理

  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    .box {
      display: flex;
      flex-wrap: wrap;
      width: 1000px;
      height: 150px;
      margin: auto;
      background-color: pink;
    }

    .box div {
      width: 25%;
      background-color: red;
      height: 150px;

    }

    .box div:nth-child(even) {
      background-color: blue;
    }

    /* 媒体查询 */
    @media (max-width:992px) {
      .box {
        width: 768px;
      }

      .box div {
        width: 50%;
      }
    }

    @media (max-width:768px) {
      .box {
        width: 540px;
      }

      .box div {
        width: 33.33%;
      }
    }

    @media (max-width:540px) {
      .box {
        width: 100%;
      }

      .box div {
        width: 100%;
      }
    }
  </style>
</head>

<body>
  <div class="box">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
  </div>
</body>

6栅格系统

 <style>
        /* 属性选择器  选中以col开头 */
        [class^='col'] {
            border: 1px solid #000;
        }
    </style>
</head>

<body>
    <!-- 补充说明 -->
    <!-- 如果栅格系统孩子的份数等于12 则孩子会占满整个版心类(container) -->
    <div class="container">
        <div class="row">
            <!-- col-lg- 超大屏幕 -->
            <div class="col-lg-6">1</div>
            <div class="col-lg-2">2</div>
            <div class="col-lg-2">3</div>
            <div class="col-lg-2">4</div>
        </div>
    </div>
    <!--如果栅格系统孩子的份数 小于12 则会? 则占不满整个container类的宽度 会有留白  -->
    <div class="container">
        <div class="row">
            <!-- col-lg- 超大屏幕 -->
            <div class="col-lg-6">1</div>
            <div class="col-lg-2">2</div>
            <div class="col-lg-1">3</div>
            <div class="col-lg-2">4</div>
        </div>
    </div>
    <!-- 如果栅格系统孩子的份数 大于12 则会?  多余的会换行显示-->
    <div class="container">
        <div class="row">
            <!-- col-lg- 超大屏幕 -->
            <div class="col-lg-6">1</div>
            <div class="col-lg-2">2</div>
            <div class="col-lg-5">3</div>
            <div class="col-lg-2">4</div>
        </div>
    </div>
</body>

qq_47670443

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
6响应式布局

1什么是响应式布局1.1.网页可以根据不同的设备或窗口大小呈现出不同的效果1.2.使用响应式布局可以使一个网页适配所有设备1.3.响应式布局的关键就是媒体查询1.4.通过媒体查询可以为不同的设备、设备的不同状态来分别设置样式。案例1：通过媒体查询，控制不同视口宽度时的盒子大小<style> /* 当视口宽度大于500px时，才会生效*/ @media(min-width:500px) { .box { width: 200p
复制链接

扫一扫