六个响应式布局案例

   跟上一篇文章，因为考虑到内容过于冗长，小伙伴不一定都适应得过来，所以我把案例拆开了，需要的来看这篇即可

1.输入框布局

使用两个label搭配一个input

先初始化一个样式：

 <div class="demo">
        <label>姓名</label>
        <input type="text">
        <label>GO</label>
 </div>

<style>

  * {
         /* 清除内边距，以自己设置的为准 */
            margin: 0;
            padding: 0;
   }
        
        .demo {
            width: 250px;
            display: flex;
            border: 1px solid #dcdcdc;
   }
</style>

 下面要让两个label自动伸缩,并且去掉边框和点击样式

.demo label {
            flex: 1;
            /*flex:1 1*/
            text-align: center;
            background-color: #f5f5f5;
        }
        
        .demo input {
            border: none;
            outline: none;
  }

如果我们要让go那个label占据25px，可以直接给他设置width吗？正确的写法应该是：

给这个label单独设置样式

 flex: 0 0 25px;

 2.长表单布局

左边右对齐，右边左对齐

初始化样式：

 <form>
        <div>
            <div>
                <label>姓名:</label>
                <input type="text">
            </div>
            <div>
                <label>请输入密码：</label>
                <input type="text">
            </div>
        </div>
 </form>

 我们给左侧label添加一个宽度，并且右侧对齐

 #form div {
            display: flex;
        }
        
        #form div label {
            flex: 0 0 100px;
            text-align: right;
  }

如果给label父盒子添加高度50px，会发现input框也会伸缩

那我们除了使用margin，如何设置上下间距呢

align-items: flex-start;即可

3.rem的使用

如果有小伙伴不了解rem可以进入小机灵下面的博客进行学习

聊聊rem适配布局_亦菲小机灵的博客-CSDN博客

小知识：和em的区别：rem是对html根元素来说，em是相对爹元素来说

     因为上面的博客里面使用的是媒体查询，所以下面我们使用js 实现不同宽度的视口下自动调整字体的大小

 load表示加载，resize表示改变，40是一个界限，设备的字体最大是40px

4.自适应布局

 比如说移动端与pc端适配

上面的代码就是在判断设备类型然后进行页面加载

如果是局部自适应的话，如下面这部分代码可以实现左右盒子大小不变，中间盒子自动伸缩，还可以搭配媒体查询改变盒子样式

5.响应式布局

 

 要实现上面的样式在移动端和pc端适配

使用媒体查询，进行样式选择，相当于选择了两种类型设备的样式表，每个表里面又实现局部自适应

6.rem弹性布局

要实现下面的页面根据大小变换字体大小以及元素的大小

 这里使用到了前面的js实现rem的使用，然后在样式表中使用rem为单位设置元素的大小

如果你对vue项目有所了解的话，可以到小机灵的另一个博客中了解如何在vue项目中使用响应式布局，链接在下方

聊聊rem适配布局_亦菲小机灵的博客-CSDN博客