vue 移动端适配

最新推荐文章于 2024-04-25 18:50:18 发布

HhhDreamof_

最新推荐文章于 2024-04-25 18:50:18 发布

阅读量198

点赞数

分类专栏： vue移动端适配文章标签： html5 vue js

本文链接：https://blog.csdn.net/hanwei020502/article/details/108665122

版权

vue移动端适配专栏收录该内容

1 篇文章 0 订阅

订阅专栏

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

前言
一、rem 布局
二、lib-flexible 插件实现
- 1.npm install px2rem-loader // 安装px2rem-loader
- 2.npm i lib-flexible --save // 载lib-flexible
总结

前言

实际开发中，我们通过设计稿得到的值单位是 px，所以要将 px 转换成 rem 再写进样式中。
将 px 转换成 rem 我们将使用 px2rem 这个工具，它有 webpack 的 loader：px2rem-loader

1，先看看网上关于移动端适配讲解

再聊移动端页面适配，rem和vw适配方案！

基础点：rem相对根节点<html>字体的大小。所以不用px;
根字体：<html>字体的大小px;
px：你就当成cm(厘米)这样的东西吧；
基准：750设计稿；

这是方案的基础理论，在这个基础上，我们还要搞明白，到底要干一件什么事情！

目标一 、手机适配：就是页面上的尺寸，无论高度，还是宽度，还有字体，随屏幕的宽度变化！这里是屏幕宽度！是不是想到了vw，对，就是这个意思；——最大程度在各个尺寸屏幕上还原设计稿

目标二、px转换成rem：一般UI给的设计稿宽度大小是750，所以，我们想直接写上面UI标记的尺寸；——最大程度减少工作

为什么选择rem?
很久之前没有vw，怕vw的兼容问题，就用了rem；也就是：rem的兼容性>vw的兼容性；
还有一种就是自己写百分比很不优雅

提示：以下是本篇文章正文内容，下面案例可供参考

一、方法一：rem 布局

在主入口：index.html，<head> 标签内添加如下JS 代码：（实现在标准 375px宽度适配下，100px = 1rem。）

 <script>
      (function () {
        // 在标准 375px 适配下，100px = 1rem;
        var baseFontSize = 100;
        var baseWidth = 375;
        var set = function () {
          var clientWidth = document.documentElement.clientWidth || window.innerWidth;
          var rem = 100;
          if (clientWidth != baseWidth) {
            rem = Math.floor(clientWidth / baseWidth * baseFontSize);
          }
          document.querySelector('html').style.fontSize = rem + 'px';
        }
        set();
        window.addEventListener('resize', set);
      }());
    </script>

二、方法二：lib-flexible 插件实现

1.安装插件

代码如下（示例）：

1.npm install px2rem-loader // 安装px2rem-loader
2.npm i lib-flexible --save // 载lib-flexible

2.在main.js中引入lib-flexible

代码如下（示例）：

import 'lib-flexible/flexible'

3.在 index.html 中添加：移动适配 meta标签

<meta name="viewport" content="width=device-width,initial-scale=1.0">
//注意这两个的区别，建议添加下面的meta，反正点击输入框，页面自动缩放
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

4、更改配置

在 build/util.js 中按如下两更改

（1）、将px2rem-loader添加到cssLoaders中

const cssLoader = {
    loader: 'css-loader',
    options: {
      minimize: process.env.NODE_ENV === 'production',
      sourceMap: options.sourceMap
    }
  }
  const px2remLoader = {
    loader: 'px2rem-loader',
    options: {
      //一般设置75
      remUnit: 37.5
    }
  }

（2）、在generateLoaders方法中添加px2remLoader


  function generateLoaders(loader, loaderOptions) {
    const loaders = options.usePostCSS ? [cssLoader, postcssLoader,px2remLoader] : [cssLoader,px2remLoader]

    if (loader) {
      loaders.push({
        loader: loader + '-loader',
        options: Object.assign({}, loaderOptions, {
          sourceMap: options.sourceMap
        })
      })
    }

    // Extract CSS when that option is specified
    // (which is the case during production build)
    if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        fallback: 'vue-style-loader'
      })
    } else {
      return ['vue-style-loader'].concat(loaders)
    }
  }

总结

5、重启

npm run dev    // 重新运行

这里需要注意：

1、 lib-flexible：是 rem 的适配插件。（例：750px == 10rem）
2、px2rem-loader ：是为了方便在书写CSS时，输入 px 会自动转为 rem。
3、有时用 ‘px2rem-loader ’ 插件，发现 rem 转换不正确。可能是开发工具设置了其他的插件转换，将其他的插件转换设置为想要的转换就行。【我就遇到过，巨坑。。。】

HhhDreamof_

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue 移动端适配

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录前言一、rem 布局二、lib-flexible 插件实现 1.npm install px2rem-loader // 安装px2rem-loader 2.npm i lib-flexible --save // 载lib-flexible 总结前言实际开发中，我们通过设计稿得到的值单位是 px，所以要将 px 转换成 rem 再写进样式中。将 px 转...
复制链接

扫一扫