响应式布局有哪些，响应式布局的实现方法

响应式布局有哪些，响应式布局的实现方法

响应式布局：只需要开发一套代码，只需要一套代码使页面适应不同的屏幕。

响应式设计通过检测视口分辨率，针对不同客户端在客户端做代码处理，来展现不同的布局和内容；

响应式布局的 5 种实现方案

• 百分比布局

• 媒体查询布局

• rem 响应式布局

• vw 响应式布局

• flex 弹性布局

一、百分比布局

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

• height、width 属性的百分比依托于父标签的宽高。但是 padding、border、margin 等属性的情况又不一样

• 1、子元素的 top 和 bottom 如果设置百分比，则相对于直接非 static 定位（默认定位）的父元素的高度，同样，子元素的 left 和 right 如果设置百分比，则相对于直接非 static 定位（默认定位的）父元素的宽度。2、子元素的 padding 和 margin 如果设置百分比，不论是垂直方向或者是水平方向都相对于直接父亲元素的 width，而与父元素的 height 无关。

• border-radius 为百分比，则是相对于自身的宽度

缺点：

计算困难，如果我们要定义一个元素的宽度和高度，按照设计稿，必须换算成百分比单位。

二、媒体查询布局

通过@media 媒体查询，可以通过给不同屏幕的大小编写不同的样式来实现响应式的布局。

响应式缺点：如果浏览器大小改变时，需要改变的样式太多，那么多套样式代码会很繁琐。

1、在实际开发中，常用的响应断点阈值设定

（括号后面是样式的缩写）

• <576px （Extra small）

• >=576px （Small --- sm）

• >=769px （Medium --- md）

• >=992px （Large --- lg）

• >=1200px （X-Large --- xl）

• >=1400px （XX-Large ---- xxl）

2、在实际开发中，常用的两种适配方案

• a、移动端 到 PC 端适配原则 （min-width 从小到大）

• b、PC 端 到 移动端适配原则 （max-width 从大到小）

3、在实际开发时，@media 会结合删格系统一起来使用，实现真正意义上的响应式开发。

• 栅格布局+断点设定 实现响应式

@media screen and (min-width: 576px) { .col-sm-1 {   grid-area: auto/auto/auto/span 1;} .col-sm-2 {   grid-area: auto/auto/auto/span 2;} .col-sm-3 {   grid-area: auto/auto/auto/span 3;}……

因代码过长，完整代码与文件 可进入粉丝群获取 ！

三、rem 布局

1、rem 如何适配

• rem 是相对于 html 根元素的字体大小的单位。

• 我们通过修改 html 中 font-size 的字体大小来控制 rem 的大小。

比如：

html { font-size: 10px;}.box { width: 10rem; height: 20rem;}

• 当 html 中 font-size: 10px; 时，此时 1rem = 10px，所以 box 盒子的宽高分别为：100px 和 200px;

• 当我们把 html 中 font-size: 20px; 时，此时 1rem = 20px,此时 box 盒子的宽高就为 200px 和 400px;

2、实际开发中如何适配，如何将设计稿对应的 px 单位转换为 rem 单位

• 在实际的开发中，我们通常会以 750px 的移动端设计稿来开发。

• 我们在代码写完后，统一会把所有 px 单位全部转成 rem 来实现。

在 px 单位下，一个盒子的样式如下：

.box { width: 700px; height: 500px; font-size: 20px; padding: 10px; background-color: red;}

如果我们把总宽 750px 分成 10rem，些时 1rem = 75px; ，转成对应的 rem 单位，就是用对应的 px/75px，得到如下结果。

.box { width: 9.3333rem; height: 6.6667rem; font-size: 0.2667rem; padding: 0.1333rem; background-color: red;}

• 以上单位的转换，我们可以利用 vscode 的插件 px to rem 来自动实现。

• 把所有代码全部写完，然后一次性用 px to rem 插件转换成 rem 单位

3、接下来如何适配不同的浏览器，实现等比例的缩放呢 ？

• 比如现在有 5 个同尺寸的屏幕 （750 640 480 375 320），所有屏幕整体宽分成 10rem

• 那我们就需要分别得到这几种不同屏幕下对应的 html 根元素的 font-size 大小了。

• 我们可以通过 js 来动态修改不同屏幕尺寸下的 font-size 大小就可以实现等比例放大和缩小了

• js 动态修改 html 根元素的 font-size 的大小，能适配不同尺寸的屏幕，不再局限于这 5 种

本文地址：IT百科频道 https://www.hkm168.com/tags/903384.html，易企推百科一个免费的知识分享平台，本站部分文章来网络分享，本着互联网分享的精神，如有涉及到您的权益，请联系我们删除，谢谢！