vue-cli3.0移动端自适应使用postcss-pxtorem

可缺不可滥

已于 2023-11-08 17:28:24 修改

阅读量1.3k

点赞数 1

分类专栏：前端项目框架文章标签： vue-cli postcss-pxtorem

于 2021-03-30 17:48:00 首次发布

本文链接：https://blog.csdn.net/glorydx/article/details/115331385

版权

前端项目框架专栏收录该内容

8 篇文章 1 订阅

订阅专栏

文章目录

postcss-pxtorem介绍

postcss-pxtorem 是一个 PostCSS 插件，用于将 CSS 中的像素单位（px）自动转换为 rem 单位。它的目标是帮助开发者在不同设备上实现更好的响应式设计，同时提高代码的可维护性。通过将像素单位转换为相对单位 rem，可以根据根元素的字体大小来动态调整布局尺寸，从而更好地适应不同屏幕尺寸和分辨率。

以下是 postcss-pxtorem 的一些主要特点和用法：

主要特点：

自动转换：插件会自动扫描 CSS 文件，将所有的像素单位转换为 rem 单位，而不需要手动更改代码。

适应不同屏幕：使用 rem 单位可以更好地适应不同屏幕尺寸和分辨率，提供更一致的用户体验。

配置选项：插件提供了一些配置选项，允许你自定义转换规则，如根元素字体大小、最小像素值、需要转换的属性等。

维护性：通过使用相对单位，代码更容易维护，因为不需要手动计算各种尺寸。

1.安装

yarn add postcss-pxtorem@5.1.1
或
npm i postcss-pxtorem@5.1.1

为啥要安装5.1.1的版本，因为太高的版本可能会出现这个报错

“ Error: PostCSS plugin postcss-pxtorem requires PostCSS 8.”

2.配置

找到或者创建postcss.config.js文件

module.exports = {
  plugins: {
    'autoprefixer': {
      browsers: ['Android >= 4.0', 'iOS >= 7'],
    },
    'postcss-pxtorem': {
      rootValue: 37.5, // 结果为：设计稿元素尺寸10分之一，比如元素宽375px,最终页面会换算成 10rem，如果设计稿是750px，这里就为75
      propList: ['*'], // 配置需要转为rem的选项
      // exclude: (file) => {
      //   return file.indexOf('desktop') !== -1; // desktop不需要转为rem
      // },
    },
  },
};

3.创建rem.js并引入

/** 设置 rem 函数 */
function setRem() {
  const htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;
  /** 得到html的Dom元素 */
  const htmlDom = document.getElementsByTagName('html')[0];
  /** 设置根元素字体大小,宽度的十分之一为一个rem，因为pxtorem配置的rootValue是设计稿的十分之一 */
  htmlDom.style.fontSize = htmlWidth / 10 + 'px';
}
// 初始化
setRem();
// 改变窗口大小时重新设置 rem
window.onresize = function() {
  setRem();
};

在main.js中或者初始化函数中引入rem.js

postcss-pxtorem npm包

postcss-pxtorem: https://www.npmjs.com/package/postcss-pxtorem

扩展阅读

在Vue 3中，你可以使用响应式设计和CSS媒体查询等技术来创建移动端响应式应用。以下是一些实现移动端响应式的一般方案和技巧：

Viewport Meta标签：
- 在HTML的<head>部分中添加Viewport meta标签，以确保你的应用适应不同的移动设备屏幕。
```
<meta name="viewport" content="width=device-width, initial-scale=1.0">
```
Flexbox和Grid布局：
- 使用CSS Flexbox和Grid布局创建灵活的页面布局，以适应不同屏幕尺寸。这些布局方式使得元素可以根据不同屏幕大小进行自动调整布局。
CSS媒体查询：
- 使用CSS媒体查询来应用不同的样式，以适应不同屏幕尺寸。你可以为不同的屏幕宽度或设备类型创建不同的CSS规则。
```
@media (max-width: 768px) {
  /* 在小屏幕上的样式 */
}
```
Vue 3的响应式设计：
- Vue 3的响应式系统和Composition API使得处理不同屏幕尺寸和设备的逻辑变得更加容易。你可以根据屏幕宽度或其他条件动态地调整组件的内容和样式。
移动优先设计：
- 考虑采用移动优先的设计方法，确保你的应用在移动设备上具有出色的用户体验，然后逐渐添加更复杂的布局和功能，以适应大屏幕设备。
使用Vue插件：
- 一些Vue插件和库可以帮助你实现移动端响应式，如vue-awesome-swiper（用于创建移动友好的轮播图），vant（一个移动端UI库）等。
字体和图像适配：
- 使用相对单位（如rem，em）和CSS的@media查询来调整字体大小和图像尺寸，以适应不同屏幕尺寸。
测试和调试：
- 在不同设备和浏览器上测试你的应用，确保它在各种情况下都能正常工作。使用浏览器的开发工具和移动设备模拟器来调试和优化布局和性能。