CSS移动端的适配

Shirley__csdn

于 2023-04-20 13:42:19 发布

阅读量89

点赞数

文章标签： css javascript 前端

本文链接：https://blog.youkuaiyun.com/Shirley__csdn/article/details/130264555

版权

文章讲述了在移动端开发中如何进行适配工作，首先通过设置HTML页面视口来确保内容适应不同设备宽度。接着介绍了使用postcss-pxtorem插件自动转换px到rem单位，以及引入amfe-flexible库动态设置html字体大小，以实现基于屏幕宽度的响应式布局。

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

第一步设置页面视口：

<meta name="viewport" 
      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

第二步配置rem单位：

安装postcss-pxtorem，自动将 px 转换成 rem 单位的插件

cnpm install postcss-pxtorem@5.1.1 -S

安装amfe-flexible，自动检测当前设备屏幕宽度serveWidth，设置html里面的font-szie为serveWidth/10

cnpm install amfe-flexible -S

文件配置

// vue.config.js
module.exports = {
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          require('postcss-pxtorem')({ rootValue: 37.5 }),
        ],
      },
    },
  },
};

// main.js
import 'amfe-flexible';