pc端以及移动端页面响应布局，同比例缩放

最新推荐文章于 2025-03-20 15:52:07 发布

jackyZhao-fighting

最新推荐文章于 2025-03-20 15:52:07 发布

阅读量2k

点赞数

文章标签： css3 css 前端

本文链接：https://blog.youkuaiyun.com/m0_55577194/article/details/121323285

版权

本文介绍了两种实现响应式布局的方法：一是通过设置html的font-size使用rem单位调整元素尺寸，借助Less进行计算；二是利用flexible.js库自动适配不同屏幕尺寸，通过cssrem插件进行px到rem的转换。详细讲解了设置过程和注意事项，包括屏幕尺寸划分、less变量使用以及如何处理屏幕缩放情况。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一.用rem方法响应布局（网页屏幕大小和分辨率有关一般分为几档)

1.查看屏幕大小用并设置min-width或者max-width 以及设置html的font-size大小（大小设置主要是分份数比如将800px屏幕大小分为40份，那每份宽度为20px）
注：此时可以借助less 参与运算比如定义变量@number='40' font-size:800px/@nember
less编译如果使用vue-cli脚手架就不用安装less编译器，如果没有脚手架，vscode中安装less编译器，直接能生成css文件。
使用脚手架，less文件作为公共样式文件，需要放在main.js中，用import导入less文件。如果组件中需要使用变量，在style标签中对lang属性设置成为less。
```
@media screen and(min-width:800px){
    html{
        font-size: 20px;
    }
}
```
2.将盒子宽度和高度以及所有相关的尺寸大小用rem单位代替 (rem是相对于html元素的font-
size大小)
二、利用flexible.js方式
```
npm i -S amfe-flexible 
```
导入 import 'amfe-flexible' (要放在main.js中导入)
安装cssrem 主要用于换算，即px换算成rem ，并且需要在设置中，搜索cssroot，font-size改为当前屏幕的width/10,因为px换算成rem，会以font-size为准。当屏幕width改变时，1rem就变成了当前屏幕宽度/10 ，盒子的尺寸也发生响应的变化。注意当前屏幕因为可能在电脑分辨率的设置了缩放与布局扩大了，所以如果想看当前屏幕的真实尺寸，可以将缩放与布局设置为100%。