响应式布局的实现方式（5种）

最新推荐文章于 2024-04-24 09:27:42 发布

记忆怪 bug

最新推荐文章于 2024-04-24 09:27:42 发布

阅读量3.5w

点赞数 28

分类专栏： html 文章标签： html

本文链接：https://blog.csdn.net/m0_66051368/article/details/124137136

版权

html 专栏收录该内容

4 篇文章 1 订阅

订阅专栏

响应式布局 是同一页面在不同的屏幕上有不同的布局，即只需要一套代码使页面适应不同的屏幕。

1、百分比布局

百分比是相对于包含块的计量单位，通过对属性设置百分比来适应不同的屏幕

包含块：

1. 有父元素相对于父元素

2. 无父元素相对于视口

3. 或者继承于父元素

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title> %和rem 布局</title>
    <style>
      html {
        font-size: 30px;
      }
      .box2 {
        width: 10rem;
        height: 10rem;
        background-color: plum;
      }
      .box {
        width: 80%;
        height: 200px;
        background-color: aquamarine;
      }
      .part {
        width: 80%;
        height: 80%;
        background-color: pink;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <div class="part"></div>
    </div>
    <div class="box2"></div>
  </body>
</html>

2、rem布局

rem（font size of the root element）是指相对于根元素的字体大小的单位，rem只是一个相对单位

题外： rem和em的对比

1. rem和em都是相对单位

2. rem相对于根元素

3. em相对于父元素

情景描述：

1. 设置HTML的根元素的font-size为20px

2. 设置红色的正方形宽高为2rem

3. 设置绿色的正方形宽高为40px

4. 从图中可以看出两个正方形一样宽高

5. 所以1rem === 根元素字号 === 20px

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>rem布局</title>
    <style>
      html {
        font-size: 20px;
      }
      .r1 {
        width: 2rem;
        height: 2rem;
        background-color: plum;
      }
      .r2 {
        width: 40px;
        height: 40px;
        background-color: aquamarine;
      }
    </style>
  </head>
  <body>
    <div class="r1"></div>
    <div class="r2"></div>
  </body>
</html>

项目中如何方便的使用的rem呢？

设想一个场景，如果一个元素的宽需要47px,根元素是20px,如果要适应不同的终端，需要转为rem，除以20px得到相应的rem值,很麻烦，那么就需要找一个可以简单计算的数值，下面就是一个方法呦

1. 设想屏幕宽度为750px，设计稿宽度也为750px

2.设置 font-size = 1rem = 屏幕宽度*100/设计稿宽度 = 100px (乘以100的原因，屏幕宽度/设计稿宽度得出的值是1，而浏览器可以接受的最小字号12px，所以乘以100既可以满足浏览器最小字号的要求，也比较好计算)

3. 屏幕宽度不会只是750px，假设屏幕宽度为width(getBoundingClientRect().width可以获取宽度)，在该宽度下的字号为fontSize

4.width/(750*fontsize)=750/(750*100)

5. 通过上面这个方法可以计算出fontSize的值

3 媒体查询 @media screen

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@media screen</title>
    <style>
      .box {
        width: 10rem;
        height: 10rem;
        background-color: pink;
        margin-left: 20rem;
      }
      @media screen and (min-width: 1200px) {
        html {
          font-size: 20px;
        }
      }
      @media screen and (max-width: 1200px) {
        html {
          font-size: 10px;
        }
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>

4 flex布局

5、vw 和 vh

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

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

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

(1条消息) 前端响应式布局原理与方案（详细版）_weixin_34273479的博客-CSDN博客https://blog.csdn.net/weixin_34273479/article/details/91401352?spm=1001.2101.3001.6650.1&depth_1-utm_relevant_index=2

记忆怪 bug

关注

28
点赞
踩
334

收藏

觉得还不错? 一键收藏
打赏
0
评论
响应式布局的实现方式（5种）

响应式布局是同一页面在不同的屏幕上有不同的布局，即只需要一套代码使页面适应不同的屏幕。1、百分比布局百分比是相对于包含块的计量单位，通过对属性设置百分比来适应不同的屏幕包含块：1. 有父元素相对于父元素2. 无父元素相对于视口3. 或者继承于父元素<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta...
复制链接

扫一扫