vue中移动端rem flexible.jspx2rem 通过viewport来适配

1第一种使用px2rem插件

1. 创建：

在src目录下创建config文件夹并在目录下创建rem.js文件写入如下代码；

(function() {

  function a() {

    var b = document.documentElement.clientWidth

    b = b > 750 ? 750 : b

    var c = (b / 750) * 100

    document.getElementsByTagName('html')[0].style.fontSize = c + 'px'

  }

  a()

  window.onresize = a

})()

2. 引入：

在src\main.js中导入之前创建的js文件；

import './config/rem.js'

3. 设置：

在项目中找到build\utils.js，定位至function generateLoaders在其上方定义如下：

var px2remLoader = { loader: 'px2rem-loader', options: { remUnit: 50 /* //设计稿根元素*/ } } // 以上的添加的px2rem的定义 // 在下方generateLoaders方法中添加[cssLoader,px2remLoader] // generate loader string to be used with extract text plugin function generateLoaders (loader, loaderOptions) { const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader,px2remLoader]

 

1. 使用：

直接设置css样式使用px单位即可，如果不需要自动转换则在其后面加上/*no*/

 

第二种

一,1.流式布局加视口  

一,-webkit-box-sizing:border-bor处理防止内容溢出,做兼容处理

点击处理高亮的效果,

-webkit-tap-hightlight-color:transparent

<style>

* {     margin: 0;     padding: 0; } .html {     /* 移动端ios禁止调整字体 */     text-size-adjust: 100% !important;     -webkit-text-size-adjust: 100%!important;     /* 抗锯齿 */     -webkit-font-smoothing: antialiased; }

body{     display: flex;     flex-direction: column;     justify-content: center;     align-items: center; } /* 低像素文本抗锯齿处理 */

.font_smoothing_n {     -webkit-font-smoothing: none; }

/* 列表 */

ul, ol {     list-style: none; }

/* 链接 */

a {     text-decoration: none; }

/* 按钮 */

button {     outline: none;     border: none;     border-radius: 0; }

input {     border: none;     outline: none; }

input[type="button"], input[type="submit"], input[type="reset"], textarea {     appearance: none;     -moz-appearance: none;     -webkit-appearance: none; }

/* 图片 */

img {     border: none;     vertical-align: middle;     width: 100%; }

/* flex布局 */

.flex {     display: flex;     display: -webkit-flex; }

.flex_warp {     flex-wrap: wrap;     -ms-flex-wrap: wrap; }

.flex_x {     flex-flow: column;     -ms-flex-flow: column; }

.flex_y {     flex-flow: row;     -ms-flex-flow: row; }

.flex_sa {     justify-content: space-around; }

.flex_sb {     justify-content: space-between; }

.flex_fs {     justify-content: flex-start; }

/* 定位 */

.position_r {     position: relative; }

.position_a {     position: absolute; }

.position_f {     position: fixed; }

.z_idx_s {     z-index: -1; }

.z_idx_m {     z-index: 10; }

.z_idx_l {     z-index: 100; }

/* 盒模型 */

.box_bb {     box-sizing: border-box;     -moz-box-sizing: border-box;     -webkit-box-sizing: border-box; }

/* 穿透 */

.penetrate {     pointer-events: none; }

/* 禁止复制 */

.no_copy {     -webkit-touch-callout: none;     -webkit-user-select: none;     -khtml-user-select: none;     -moz-user-select: none;     -ms-user-select: none;     user-select: none; }

/* 字体 */

.font_b {     font-weight: bold; }

.font_n {     font-weight: normal; }

 

</style>

封装计算rem

<script>  

//得到手机屏幕的宽度

let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;

 

//得到html的Dom元素

let htmlDom = document.getElementsByTagName('html')[0];

if(htmlWidth>750){htmlWidth=750}

//设置根元素字体大小

htmlDom.style.fontSize= htmlWidth/20 + 'px';

     </script>

第二种引入插件flexible.js 在计算rem的值

<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.2/??flexible_css.js,flexible.js"

></script>

在vue中使用

安装lib-flexible.js

npm install lib-flexible --save

在项目入口文件main.js中引入lib-flexible

import 'lib-flexible/flexible'

在项目根目录的index.html 头部删除自动生成的meta标签, lib-flexible会根据屏幕自动生成相对于的meta标签 // 删除 <meta name="viewport" content="width=device-width, initial-scale=1.0">

安装px2rem-loader

在实际的开发中，使用flexible插件时 会自动把px转换成rem单位。在vue-cli中安装过lib-flexible之后 ，将px转换成rem，我们将使用px2rem这个工具，

npm install px2rem-loader

 

配置px2rem-loader 修改build/utils.js, 在cssLoader变量中

const cssLoader = {     loader: 'css-loader',     options: {       sourceMap: options.sourceMap,       importLoader: 5 // 在加载cssLoader之前加载的loader个数     }   }   const px2remLoader = {     loader: 'px2rem-loader',     options: {       emUnit: 75 // 设计稿的1/10     }   }   // 在后面的函数中   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         })       })     } 设置完成后重启项目  

 

vue移动端适配终极解决方案hotcss

https://github.com/LinkSun/hotcss

 

点击延迟问题

<script src="jd/lib/fastclick/fastclick.js"></script>

<script>

// 绑定fastclick 给body绑定 因为元素都在body里面 间接为所有元素都绑定了fastclick

window.addEventListener('load', function() {

new FastClick(document.body);

}, false);

后面直接写click就可以了

 

 

通过viewport来适配

<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, user-scalable=no,initial-scale=0.5, minimum-scale=0.5,maximum-scale=0.5" /> <title>无标题文档</title> <style> body { margin: 0; } #box { width: 300px; height: 300px; margin: 0 auto; background: red; } /* 1. 页面宽度定死 -- 320 2. 动态的设置 viewport 把可视区的宽度设置成 320 width = [pixel_value | device-width ] , initial-scale = float_value , minimum-scale = float_value , maximum-scale = float_value , user-scalable = [yes | no] , */ </style> </head> <body> <div id="box"></div> </body> </html>