响应式布局

最新推荐文章于 2024-05-20 22:08:52 发布

亦菲小机灵

最新推荐文章于 2024-05-20 22:08:52 发布

阅读量93

点赞数

分类专栏：前端博客文章标签： css html 前端

本文链接：https://blog.csdn.net/m0_58467275/article/details/130676562

版权

前端博客专栏收录该内容

8 篇文章 1 订阅

订阅专栏

一.媒体查询@media

根据不同的屏幕尺寸制定不同的样式

案例：

在100-200px之间，盒子粉色，301-500之间，盒子是红色

    <style>
        .div {
            width: 150px;
            height: 200px;
            background-color: yellow;
        }
        
        @media screen and (min-device-width:100px) and (max-device-width:300px) {
            .div {
                background-color: pink;
            }
        }
        
        @media screen and (min-device-width:301px) and (max-device-width:500px) {
            .div {
                background-color: rgb(228, 13, 49);
            }
        }
    </style>

<body>
    <div class="div">

    </div>
</body>

常用参数

高度一般使用滚动条进行处理

其他引入方式

1.内部样式表

前面的以及下面的主要是使用内部样式表的形式

2.外部样式表引入

每个样式表中放入一些变化的样式

二.flex布局

flex弹性盒子，实现弹性布局，可以配合rem处理尺寸适配问题。

flex更加符合响应式设计特点，任何一个容器都可以指定为flex布局

flex布局分为主轴和交叉轴，例如内部元素是横向排列，那么x轴是主轴，y轴是交叉轴，上面的四个顶点（start，end）分别是主轴和交叉轴的顶点，mian size表示的是元素占主轴的空间，cross size表示的是元素占交叉轴的空间

1.flex-direction

子元素在父元素盒子中的排列方式

假设下面一段代码:

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

 <style>
        .div {
            width: 500px;
            background-color: aqua;
        }
        
        .div div {
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>

如果使用弹性布局：给父元素设置flex

  .div {
            width: 500px;
            background-color: aqua;
            display: flex;
            /* 默认x轴是主轴 */
            flex-direction: row-reverse;
  }

现在将父元素的大小减少成不够装四个盒子，300px

但是不代表不设置宽度

2.flex-wrap

子元素在父元素盒子中是否换行

上面的情况，如果在父元素上使用换行，那么就不会压缩显示，而是换行

3.flex-flow

方向和是否换行可以合并

flex-flow： row wrap；

4.justify-content

用来在存在剩余空间时，设置为间距的方式

比如下面的情况，父盒子350px 子盒子100px 设置了换行

我们使用space-around

5.align-items

设置每个flex元素在交叉轴上的默认对齐方式，将每行当成独立的个体去处理，并不是只处理单行

    .div {
            width: 350px;
            background-color: aqua;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
            height: 250px;
            align-items: center;
        }
        
        .div div {
            width: 100px;
            height: 100px;
            background-color: pink;
        }

6.align-content

设置每个flex元素在交叉轴上的默认对齐方式，和align-items不同的是，它将多行看成一个整体，整体上排，整体下排，整体居中

将上面的align-items替换成align-content

7.其他属性

（1）flex-basis

在子元素中添加这个属性

      .div {
            display: flex;
            width: 400px;
            height: 300px;
            background-color: aqua;
        }
        
        .div div {
            width: 200px;
            height: 200px;
            background-color: pink;
            flex-basis: 30%;
        }