CSS之布局系列--响应式布局的实现方式

骑猪看日落 2023-10-01 07:39 12阅读 0赞

原文网址：[CSS之布局系列--响应式布局的实现方式\_IT利刃出鞘的博客-CSDN博客][CSS_--_IT_-CSDN]

## 简介 ##

**说明**

本文介绍前端响应式布局的实现方式。

**响应式布局简介**

响应式布局：只需要一套代码就可以了，它可以适用于所有设备（PC、手机、平板等）。同一页面在不同屏幕尺寸下有不同的布局。

前端的各种布局详见：[静态布局、流式布局、自适应布局、响应式布局的概念及区别\_IT利刃出鞘的博客-CSDN博客][IT_-CSDN]

## 方案1：媒体查询 ##

**简介**

这是最好用最常用的方案。

使用媒体查询获取设备的尺寸，然后进行布局和样式的设置，从而达到适合不同设备的目的。

<table style="width:484px;"> 
 <thead> 
  <tr> 
   <th style="width:209px;">设备划分</th> 
   <th style="width:272px;">小区间</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td style="width:209px;">超小屏幕（手机）</td> 
   <td style="width:272px;">&lt; 768 像素</td> 
  </tr> 
  <tr> 
   <td style="width:209px;">小屏设备（平板）</td> 
   <td style="width:272px;">&gt;= 768px ~ &lt; 992px</td> 
  </tr> 
  <tr> 
   <td style="width:209px;">大屏设备（屏幕显示器）</td> 
   <td style="width:272px;">&gt;= 992px ~ &lt; 1200px</td> 
  </tr> 
  <tr> 
   <td style="width:209px;">超大屏设备（大屏幕显示器）</td> 
   <td style="width:272px;">&gt;= 1200 像素</td> 
  </tr> 
 </tbody> 
</table>

上面的分割方案不一定满足项目中的实际需求，我们可以先用跨度大的分割点进行分割，如果出现不适配的情况可以再根据实际情况增加新的分割点。

**示例**

/* 初始样式 */
    body {
    	background-color: grey;
    }
    
    /* 大型设备（大台式电脑，1200px 起） */
    @media (min-width:1200px) {
        body {
            background-color: yellow;
        }
    }
    
    /* 中型设备（台式电脑，992px 起） */
    @media (min-width:992px) and (max-width:1200px) { 
        body {
            background-color: green;
        }
    }
    
    /* 小型设备（平板电脑，768px 起） */
    @media (min-width:768px) and (max-width:992px) {
        body {
            background-color: blue;
        }
    }
    
    /* 超小设备（手机，小于 768px） */
    @media (max-width:768px) {
        body {
            background-color: red;
        }
    }

也可以加个screen：

/* 大型设备（大台式电脑，1200px 起） */
    @media screen and (min-width:1200px) {
        body {
            background-color: yellow;
        }
    }

## 方案2：百分比 ##

**简介**

通过百分比单位，可以使得浏览器中组件的宽和高随着浏览器的高度的变化而变化，从而实现响应式的效果。

Bootstrap里面的栅格系统就是利用百分比来定义元素的宽高。

子元素height、width 属性的百分比依托于父标签的宽高，但是其他盒子属性则不完全依赖父元素：

*  子元素的 top/left 和 bottom/right 如果设置百分比，则相对于直接非 static 定位（默认定位）的父元素的高度/宽度；
 *  子元素的 padding 如果设置百分比，不论是垂直方向或者是水平方向，都相对于直接父亲元素的 width，而与父元素的 height 无关；
 *  子元素的 margin 如果设置成百分比，不论是垂直方向还是水平方向，都相对于直接父元素的 width；
 *  border-radius 不一样，如果设置 border-radius 为百分比，则是相对于自身的宽度。

**缺点**

*  border、 font-size 等属性不能用百分比设置。
 *  计算困难。如果要定义一个元素的宽度和高度，按照设计稿，必须换算成百分比单位。
 *  布局复杂。各个属性中如果使用百分比，相对父元素的属性并不是唯一的。

**使用场景**

对图片和大块布局进行百分比设置。

## 方案3：Rem ##

**简介**

rem是一个相对单位， 1rem = html元素的font-size大小。

有两种方法可以达到适配不同屏幕：

1.  媒体查询，在不同分辨率下给 html 的 font-size 赋值。
2.  js 动态计算赋值

**布局思路**

1.  一般不要给元素设置具体的宽度，但是对于一些小图标可以设定具体宽度值
2.  高度值可以设置固定值，设计稿有多大，我们就严格有多大
3.  所有设置的固定值都用rem做单位（首先在HTML总设置一个基准值：px和rem的对应比例，然后在效果图上获取px值，布局的时候转化为rem值)
4.  js获取真实屏幕的宽度，让其除以设计稿的宽度，算出比例，把之前的基准值按照比例进行重新的设定，这样项目就可以在移动端自适应了

**缺点**

打开页面时候，元素大小会有一个变化过程。

## 方案4：vw/vh ##

CSS3中引入了一个新的单位vw/vh，vw表示相对于视图窗口的宽度，vh表示相对于视图窗口高度，除了vw和vh外，还有vmin和vmax两个相关的单位。各个单位具体的含义如下：

<table> 
 <tbody> 
  <tr> 
   <td> <p style="margin-left:.0001pt;text-align:left;"><strong><strong>单位</strong></strong></p> </td> 
   <td> <p style="margin-left:.0001pt;text-align:left;"><strong><strong>含义</strong></strong></p> </td> 
  </tr> 
  <tr> 
   <td> <p style="margin-left:.0001pt;text-align:left;">vw</p> </td> 
   <td> <p style="margin-left:.0001pt;text-align:left;">相对于视窗的宽度，1vw 等于视口宽度的1%。即视窗总宽度是100vw</p> </td> 
  </tr> 
  <tr> 
   <td> <p style="margin-left:.0001pt;text-align:left;">vh</p> </td> 
   <td> <p style="margin-left:.0001pt;text-align:left;">相对于视窗的高度，1vh 等于视口高度的1%。即视窗总高度是100vh</p> </td> 
  </tr> 
  <tr> 
   <td> <p style="margin-left:.0001pt;text-align:left;">vmin</p> </td> 
   <td> <p style="margin-left:.0001pt;text-align:left;">vw和vh中的较小值</p> </td> 
  </tr> 
  <tr> 
   <td> <p style="margin-left:.0001pt;text-align:left;">vmax</p> </td> 
   <td> <p style="margin-left:.0001pt;text-align:left;">vw和vh中的较大值</p> </td> 
  </tr> 
 </tbody> 
</table>

[CSS_--_IT_-CSDN]: https://knife.blog.csdn.net/article/details/122097821
[IT_-CSDN]: https://knife.blog.csdn.net/article/details/122119409