关于移动端样式自适应方案尝试

最新推荐文章于 2024-07-06 14:54:18 发布

front-end workhorse

最新推荐文章于 2024-07-06 14:54:18 发布

阅读量383

点赞数

分类专栏：前端基础知识归档文章标签：前端

前端基础知识归档专栏收录该内容

14 篇文章

订阅专栏

本文介绍了如何通过使用rem单位及postcss-px-viewport插件实现移动端设备的自适应布局，详细展示了设置base字体大小的方法，并提供了实际使用的代码示例。

现在移动端设备千差万别，用一套样式已经很难满足需求，先从简单的样式大小类说起，小屏手机整体偏小，大屏样式整体偏大，即根据屏幕大小自适应调整整体样式的大小。

第一反应，用rem，给定一个base，这个base（一般是指html的font-size值）在程序最开始，根据屏幕大小设定好，剩下的样式大小设置都是根据这个base转化成对应rem值，那么所有的样式也就基本达到自使用了，给出一段设置base的js代码（基于14px设计）

window.onload = () => {
      var html = document.documentElement
      var width = html.getBoundingClientRect().width
      html.style.fontSize = width * 14 / 375 + 'px'
      console.log('width', width)
    }

当然自己每次算rem也是头疼，sublime有一个插件cssrem，可以设定好后，直接给到px值就能转化成rem。

之后发现有一个插件postcss-px-viewport，webpack类打包工具中配置后设计的初始值，它将自动根据屏幕的大小，生成对应比例的样式，所有的样式只需按设计初始值给出，就用对应px不需要转换。

 module: {
    loaders: [
    {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          postcss: [
            require('postcss-px-to-viewport')({ // 根据屏幕大小转换样式
              viewportWidth: 375
            }),
            require('autoprefixer')({ // 为样式自动添加前缀
              browsers: ['last 3 versions']
            })
          ]
        }
      }
    ]
 }