flex布局，rem布局，自适应布局，响应式布局，Bootstrap

最新推荐文章于 2024-05-05 05:25:12 发布

Realistic-er

最新推荐文章于 2024-05-05 05:25:12 发布

阅读量1.1k

点赞数 1

文章标签：前端

本文链接：https://blog.csdn.net/m0_52518047/article/details/115393390

版权

Flex布局 REM单位媒体查询响应式布局栅格系统

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

传统布局与flex布局：

传统布局：

1.兼容性好，

2.布局繁琐，

3.局限性，不能再移动端很好的布局

flex弹性布局

1.操作方便，布局极为简单，移动端应用很广泛，

2.PC端浏览器支持情况较差

3.ie11或更低版本，不支持或仅部分支持

注意：当我们为父盒子设为flex布局以后，子元素的float，clear和vertical-align属性将失效

建议：

1.如果是PC端页面布局，我们还是传统布局

2.如果是移动端或者不考虑兼容性问题的PC端页面布局，我们还是使用flex弹性布局

父属性

1.align-content设置侧轴上的子元素的排列方式（多行）：

flex-start：默认值在侧轴的头部开始排列

flex-end：在侧轴的尾部开始排列

center：在侧轴中间显示

space-around：子项在侧轴平分剩余空间

space-between：子项在侧轴先分布在两头，再平分剩余空间

strech：设置子项元素高度平分父元素高度

2.align-items设置侧轴上的子元素排列方式：（这个针对的是单行）

flex-start：默认值从上到下

flex-end：从下到上

center：挤在一起居中（垂直居中）

stretch：拉伸

3. flex-direciton：

这是规定沿着x轴方向排列：
row：默认值从左到右

row-reverse：从右到左（简单了解我们的翻转）

这是规定沿着y轴方向排列：

olumn：从上到下

column-reverse：从下到上

4.# flex-flow：

flex-flow属性是flex-direction和flex-wrap属性的复合属性`

flex-flow：row    wrap；

5.# flex-wrap设置子元素是否换行：

原因：flex布局中，默认的子元素是不换行的，如果装不开，会缩小子元素的宽度，放到父元素里面

nowrap：默认不换行

wrap：换行

6.# justify-content设置主轴上的子元素排列方式：

使用属性之前一定要确定好主轴是哪个

flex-start：默认值从头部开始，如果主轴是x轴，则从左到右

flex-end：从尾部开始排列 

center：让子元素居中对齐

space-around：让子元素平分空间

space-between：先让盒子两边贴边，然后让其他的盒子平分剩余的空间

子属性

flex属性：定义子项目分配剩余空间，用flex来表示占多好份数

rem的使用方法：r是root单词的缩写

指相对于根元素的字体大小的单位，不管是web端还是移动端用法都是一样的

（1）HTML标签

<div>123</div>

（2）CSS样式

html {
            font-size: 16px;
        }
        div {
            font-size: 1rem;
            width: 20rem;
            height: 20rem;
            background-color: red;
        }

举例：

（1）HTML标签

<div>123</div>

（2）CSS样式

<style>
        html {
            font-size: 16px;
        }
        div {
            font-size: 1rem;
            width: 20rem;
            height: 20rem;
            background-color: red;
        }
    </style>

（3）JS文件

<script>
        var c = ()=> {
            //获得屏幕的宽度
            let w = document.documentElement.clientWidth;
            //此处的20是随机的，自己来定
            //iphone5的宽度就是320px
            let n = (20*(w/320)>40?40+"px":20*(w/320)+"px");
            document.documentElement.style.fontSize=n;
        }
        //load是页面加载事件
        window.addEventListener("load",c)
        //resize是电脑屏幕尺寸发生变化
        window.addEventListener("resize",c)
    </script>

移动端 REM 适配

Vant 中的样式默认使用 px 作为单位，如果需要使用 rem 单位，推荐使用以下两个工具：

postcss-pxtorem 是一款 postcss 插件，用于将 px 单位转化为 rem
lib-flexible 用于设置 rem 基准值

下面我们分别将这两个工具配置到项目中完成 REM 适配。

（1）使用 lib-flexible 动态设置REM 基准值（html 标签的字体大小）

安装依赖：

# yarn add amfe-flexible
npm i amfe-flexible

然后在 main.js 中加载执行该模块：

import 'amfe-flexible'

最后测试：在浏览器中切换不同的手机设备尺寸，观察 html 标签 font-size 的变化。

例如在 iPhone 6/7/8 设备下，html 标签字体大小为 37.5 px

例如在 iPhone 6/7/8 Plus 设备下，html 标签字体大小为 41.4 px

（2）使用 postcss-pxtorem 将 px 转为 rem

安装依赖：

# yarn add -D postcss-pxtorem
# -D 是 --save-dev 的简写
npm install postcss-pxtorem -D

然后在项目根目录中创建 postcss.config.js 文件：

module.exports = {
  plugins: {
    'autoprefixer': {
      browsers: ['Android >= 4.0', 'iOS >= 8']
    },
    'postcss-pxtorem': {
      rootValue: 37.5,
      propList: ['*']
    }
  }
}

配置完毕，重新启动服务。

最后测试：刷新页面，审查元素样式查看是否已将 px 转换为 rem。

这是没有配置转换之前的。

这是转换之后的，可以看到 px 都被转换为了 rem。

需要注意的是：

该插件不能转换行内样式中的 px，例如 <div style="width: 200px;"></div>

module.exports = {

 // plugins配置要使用的相关插件

 // 'autoprefixer'自动添加浏览器厂商声明前缀，用来兼容不同的浏览器

 // vuecli已经在内部配置了'autoprefixer'，

 // plugins: {



  // 'postcs-pxtorem'将px转为rem

  'postcss-pxtorem': {

   // rootValue转换的跟元素基准值

   // 正常情况下按照你的设计稿来

   // 如果750宽的设计稿，那么你写750/10

   // 那么我们就可以在设计稿中测量多少写多少

   // 如果375宽的设计稿，那么你写375/10

   // vant组件库基于375宽写的

   // 移动端页面都是以iphone6/7/8为原型设计的

   // 写成37.5的话那么就需要将你测量的数据除以2

   rootValue: 37.5,

   // propList：需要转换的css属性

   // *就是所有属性都要转换

   propList: ['*']

  }

}

自适应布局代码：

（1）左侧固定，右侧自适应

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>左侧固定，右侧自适应 </title>
    <style>
        * {
            padding: 0%;
            margin: 0%;
        }
        .container_son1 {
            width: 200px;
            height: 200px;
            background-color: red;
            float:left;
        }
        .container_son2 {
            overflow: hidden;
            height: 200px;
            background-color: green;
        }
    </style>
</head>
<body>
        <div class="container_son1">
        </div>
        <div class="container_son2">
        </div>
      
</body>
</html>

（2）两侧固定，中间自适应

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>两侧固定，中间自适应</title>

    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .clearfix:after {
            display: block;
            visibility: hidden;
            clear: both;
            height: 0;
            content: "";
        }
        .clearfix {
            *zoom: 1;
        }
        .left {
            float: left;
            width: 200px;
            height: 200px;
            background-color: green;
        }
        
        .right {
            float: right;
            width: 200px;
            height: 200px;
            background-color: red;
        }
        .middle {
            height: 200px;
            background-color: pink;
            overflow:hidden;
            margin-right: 200px;
        }
    </style>
</head>
<body>
    

    <div class="left clearfix"></div>
    <div class="right clearfix"></div>
    <div class="middle">
    </div>
    
</body>
</html>

（3）中间固定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        * {
            padding: 0%;
            margin: 0%;
        }
        .div0 {
            width: 1280px;
            height: 300px;
        }
        .div1 {
            width: 33%;
            height: 300px;
            background-color:red;
            float: left;
        }
        .div2 {
            width: 33%;
            height: 300px;
            background-color: pink;
            float: right;
        }
        .div3 {
            height: 300px;
            background-color: black;
            overflow: hidden;
        }
    </style>
</head>
<body>
    
    <div class="div0">
        <div class="div1"></div>
        <div class="div2"></div>
        <div class="div3"></div>
    </div>
</body>
</html>

什么是媒体查询：

为不同尺寸的屏幕设定不同的CSS样式，要进行判断，在移动端中使用比较频繁

移动端：

（1）HTML标签

<div class="div0"></div>

（2）CSS样式

min-device-width：最小屏幕宽度

max-device-width:300px：最大屏幕宽度

  .div0 {
    width: 100px;
    height: 200px;
  }
  /* 最小的屏幕尺寸是200px */
  屏幕宽度在200-300px之间，盒子背景颜色是红色
  @media screen and (min-device-width:200px) and (max-device-width:300px) {
    .div0 {
      background-color: red;
    }
  }
  
  @media screen and (min-device-width:301px) and (max-device-width:500px) {
    .div0 {
      background-color: blue;
    }
  }

PC端

（1）HTML标签

<div class="div0"></div>

（2）CSS样式

.div0 {
    width: 100px;
    height: 200px;
  }
  /* 最小的屏幕尺寸是500px */
  @media screen and (min-width:500px) and (max-width:700px) {
    .div0 {
      background-color: red;
    }
  }
  
  @media screen and (min-width:700px) {
    .div0 {
      background-color: blue;
    }
  }

简单案例：

（1）HTML标签

<div class="div0">
        <div></div>
        <div></div>
        <div></div>
    </div>

（2）CSS样式

* {
    margin: 0px;
    padding: 0px;
}
.div0 {
    width: 100%;
    height: 200px;
    div {
        float: left;
        height: 200px;
    }
}
// 1行3个div
// 100-200
@media screen and (min-device-width:100px) and (max-device-width:200px) {
    .div0 {
        div {
            width: 33.3%;
        }
        div:nth-child(1) {
            background-color: red;
        }
        div:nth-child(2) {
            background-color: green;
        }
        div:nth-child(3) {
            background-color: blue;
        }
        
    }
}
// 2行3个div
// 300-500
@media screen and (min-device-width:300px) and (max-device-width:500px) {
    .div0 {
        div {
            width: 50%;
        }
        div:nth-child(1) {
            background-color: red;
        }
        div:nth-child(2) {
            background-color: green;
        }
        div:nth-child(3) {
            background-color: blue;
        }
        
    }
}
// 3行3个div
// 501-900
@media screen and (min-device-width:501px) and (max-device-width:900px) {
    .div0 {
        div {
            width: 100%;
        }
        div:nth-child(1) {
            background-color: red;
        }
        div:nth-child(2) {
            background-color: green;
        }
        div:nth-child(3) {
            background-color: blue;
        }
        
    }
}

布局容器和栅格系统：

布局容器：

1…container类用于固定宽度并支持响应式布局的容器,两侧会有留白

<div class="container">
</div>

举例：

<div class="container" style="background-color: thistle;height: 500px;">
        布局容器：有固定宽度，距离两侧有一定的距离
    </div>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yW7WVnlA-1617332421584)(D:\项目笔记\css\响应式布局\捕获.PNG)]

2…container-fluid用于100%宽度，占据全部视口（viewport）的容器

<div class="container-fluid">
</div>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IjrzGtMl-1617332421589)(D:\项目笔记\css\响应式布局\1.PNG)]

栅格系统：

在行中可以添加列，只有列才可以作为容器的直接子元素，但列数之和不能超过平分的总列数，比如12，如果大于12，则自动换到下一行

xs----------超小屏，sm----------小屏（750px），md----------中屏（970px），lg----------大屏（1170px）

example：

表示一行有4列，一行有8列，md是中等屏幕的意思，可以替换成别的

<div class="container">
        <div class="row">
            //一行中有2个盒子，盒子1占4分，盒子2占8分
            <div class="col-md-4">4列</div>
            <div class="col-md-8">8列</div>
        </div>
    </div>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gT5XQE2K-1617332421595)(D:\项目笔记\css\响应式布局\2.PNG)]

4+4+5>12,多出来的就会换行

<div class="row">
            <div class="col-md-4" style="background-color: thistle;">4列</div>
            <div class="col-md-4"  style="background-color: red;">4列</div>
            <div class="col-md-5"  style="background-color: green;">5列</div>
        </div>

列偏移：

在列元素上添加col-md-offset-8，表示该列向右偏移8个列的宽度

col-md-offset-8加上这个属性列就会发生偏移

<div class="row">
            <div class="col-md-1" style="background-color: thistle;">4列</div>
            <div class="col-md-1"  style="background-color: red;">4列</div>
            <div class="col-md-1 col-md-offset-8"  style="background-color: green;">5列</div>
            <div class="col-md-1"  style="background-color: blue;">5列</div>
        </div>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7B6nwD8z-1617332421608)(D:\项目笔记\css\响应式布局\3.PNG)]

列排序：

在列元素上添加 col-md-push-1表示向右偏移并且浮动1格， col-md-pull-1表示向左偏移并且浮动1格

<div class="row">
            <div class="col-md-1" style="background-color: thistle;">4列</div>
            <div class="col-md-1 col-md-push-1"  style="background-color: red;">4列</div>
            <div class="col-md-1"  style="background-color: green;">5列</div>
            <div class="col-md-1 col-md-pull-1"  style="background-color: blue;">5列</div>
            <div class="col-md-1"  style="background-color: pink;">5列</div>
        </div>

列嵌套：

理论上说一行可以被分成12格，如果有嵌套，里边的格又可以被分成12格

<div class="row">
            <div class="col-md-6" style="background-color: thistle;">
                <div class="row">
                    <div class="col-md-9" style="background-color: blue";>
                     123
                    </div>
                    <div class="col-md-1" style="background-color: green">
                    1
                    </div>
                </div>
            </div>
        </div>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-abrUrqnf-1617332421615)(D:\项目笔记\css\响应式布局\4.PNG)]

Realistic-er

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
打赏
2
评论
flex布局，rem布局，自适应布局，响应式布局，Bootstrap

传统布局与flex布局：传统布局：1.兼容性好，2.布局繁琐，3.局限性，不能再移动端很好的布局flex弹性布局1.操作方便，布局极为简单，移动端应用很广泛，2.PC端浏览器支持情况较差3.ie11或更低版本，不支持或仅部分支持注意：当我们为父盒子设为flex布局以后，子元素的float，clear和vertical-align属性将失效建议：1.如果是PC端页面布局，我们还是传统布局2.如果是移动端或者不考虑兼容性问题的PC端页面布局，我们还是使用flex弹性布局父属性1.al
复制链接

扫一扫