采用rem实现响应式布局的基本代码

文章说明

本文主要介绍前端响应式布局的三种实现思路；本文介绍的内容为博主自己的想法，实际中响应式的实现规范更多，需要注意的点更多，本文主要进行一个基本的介绍。

响应式布局的提出主要为了更好的解决不同分辨率的屏幕下同一页面的展示情况，尽量做到展示效果一致，或达到更大的屏幕展示更多的内容的效果；一般主流的实现思路为采用rem结合flex布局实现，本文就是介绍rem在响应式布局中的使用。

rem是相对长度单位，1rem表示的是根元素html的字体大小，即根元素的font-size属性值，默认为16px

本文主要通过动态调整该值来达到响应式布局的初步效果
实际使用中会结合flex布局来达到自动调整部分元素的布局方式，如屏幕大时采用横向展示，屏幕小时采用纵向展示，通过改变flex-direction实现

需要注意非常关键的一点，那就是采用rem来实现响应式的话，则不能够再单独使用px，需要将px按照设计图比例转化为rem；当然也有通过框架来将基于px的页面转化为rem的，例如 amfe-flexible，不过它的效果不是那么全面

核心源码

方案一：采用媒体查询动态调整rem大小

源码如下，它会自动的根据屏幕的宽度匹配对应的字体大小

<script setup>

</script>

<template>
  <p>我是方案一</p>
  <p>采用媒体查询自动调整rem大小</p>
  <p>可以通过改变宽口大小来观察字体变化</p>
</template>

<style>
@media screen and (min-width: 1600px) and (max-width: 2000px) {
  html {
    font-size: 30px;
  }
}

@media screen and (min-width: 1200px) and (max-width: 1600px) {
  html {
    font-size: 24px;
  }
}

@media screen and (min-width: 1000px) and (max-width: 1200px) {
  html {
    font-size: 22px;
  }
}

@media screen and (min-width: 800px) and (max-width: 1000px) {
  html {
    font-size: 20px;
  }
}

@media screen and (min-width: 600px) and (max-width: 800px) {
  html {
    font-size: 18px;
  }
}

@media screen and (min-width: 400px) and (max-width: 600px) {
  html {
    font-size: 16px;
  }
}

@media screen  and (max-width: 400px) {
  html {
    font-size: 14px;
  }
}
</style>

方案二：采用js自动计算rem大小

根据宽度自动计算rem，需要考虑dpr，实现放大和缩小

<script setup>
import {onMounted} from "vue";

onMounted(() => {
  window.onresize = () => {
    resize();
  };
  resize();
});

function resize() {
  const baseWidth = 1280;
  const currentWidth = document.documentElement.getBoundingClientRect().width;
  document.documentElement.style.fontSize = (currentWidth / baseWidth) * 24 * window.devicePixelRatio + "px";
}
</script>

<template>
  <p>我是方案二</p>
  <p>采用js动态计算调整rem大小</p>
  <p>可以通过改变宽口大小来观察字体变化</p>
</template>

<style scoped>

</style>

方案三：自适应dpr且采用按钮调整大小

页面自动适应dpr，不在通过滚轮改变大小，而是通过按钮调整rem大小

<script setup>
import {onMounted} from "vue";

onMounted(() => {
  window.onresize = () => {
    resize();
  };
  resize();
});

let origin = 1;

function resize() {
  document.documentElement.style.fontSize = 24 * origin / window.devicePixelRatio + "px";
}

function enlarge() {
  origin *= 1.25;
  resize();
}

function lessen() {
  origin /= 1.25;
  resize();
}
</script>

<template>
  <p>我是方案三</p>
  <p>采用自适应dpr且通过按钮调整rem大小</p>
  <p>可以通过改变宽口大小和点击调整按钮来观察字体变化</p>

  <button @click="enlarge">放大</button>
  <button @click="lessen">缩小</button>
</template>

<style scoped>
button {
  font-size: 1rem;
  padding: 0.2rem;
  margin: 1rem;
}
</style>

演示截图

方案一演示截图

方案二演示截图

方案三演示截图

代码下载

基于rem实现的响应式布局