不同屏幕适配解决方案

最新推荐文章于 2025-04-11 10:12:04 发布

原创

最新推荐文章于 2025-04-11 10:12:04 发布 · 619 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端

文章介绍了如何通过amfe-flexible实现移动端的可伸缩布局，配合postcss-pxtorem进行px转rem，同时探讨了利用css3transform的scale属性进行大屏视觉适应的方法，包括组件封装和动态调整比例。

一. 移动端适配方案：amfe-flexible和postcss-pxtorem插件结合

amfe-flexible：配置可伸缩布局方案，主要是将1rem设为viewWidth/10。根据设备宽度，修改根元素html的大小，以适配不一样终端。

postcss-pxtorem：是postcss的插件，用于将像素单元生成rem单位，它可以自动将px转换成rem，并且对一些特殊情况进行处理。

第一步：安装两个插件

npm i amfe-flexible --save-dev   
npm i postcss-pxtorem --save-dev

第二步：在main.js文件中导入amfe-flexible

import 'amfe-flexible'

第三步：vue.config.js中配置postcss-pxtorem

const {
   
    defineConfig } = require("@vue/cli-service");
module.exports = defineConfig({
   
   
  lintOnSave: false,	
  transpileDependencies: true,
  // 配置css前缀,px转rem
  css: {
   
   
    loaderOptions: {
   
   
      postcss: {
   
   
  		postcssOptions:{
   
   
  		  plugins: [
  		    //autoprefixer(),
  		    require("postcss-pxtorem")({
   
   
  		      rootValue: 256