原文网址：

简介

说明

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

响应式布局简介

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

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

方案1：媒体查询

简介

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

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

设备划分	小区间
超小屏幕（手机）	< 768 像素
小屏设备（平板）	>= 768px ~ < 992px
大屏设备（屏幕显示器）	>= 992px ~ < 1200px
超大屏设备（大屏幕显示器）	>= 1200 像素

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

示例

/* 初始样式 */
body {
	background-color: grey;
}

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

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

/* 小型设备（平板电脑，768px 起） */
@media screen and (min-width:768px) and (max-width:992px) {
    body {
        background-color: blue;
    }
}

/* 超小设备（手机，小于 768px） */
@media screen and (max-width:768px) {
    body {
        background-color: red;
    }
}

方案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两个相关的单位。各个单位具体的含义如下：

单位	含义
vw	相对于视窗的宽度，1vw 等于视口宽度的1%。即视窗总宽度是100vw
vh	相对于视窗的高度，1vh 等于视口高度的1%。即视窗总高度是100vh
vmin	vw和vh中的较小值
vmax	vw和vh中的较大值

标签：布局,vh,百分比,width,--,元素,响应,宽度,CSS
来源： https://blog.csdn.net/feiying0canglang/article/details/122097821