移动端及pc端适配

1.rem搭配CSS预处理器使用

这里我就用vue+less来简单操作一下，具体可以封装到底层，这里暂且演示一下原理。

这里推荐一下使用我的自制脚手架 (songyao-cli) 来快速生成一个vue项目，安装完依赖后，开始配置less.

/rem.less/

@device-width: 375; /设备布局视口/

@rem: (@device-width/10rem);

复制代码

然后将@rem配置成less全局变量

//vue.config.js

module.exports = {

css: {

loaderOptions:{

less: {

additionalData: @import '~@/static/rem.less';

}

}

}

}

复制代码

在vue的入口文件配置计算rem的方法

// toRem.js

export default function() {

const root = document.documentElement;

/** 以iPhone6为例：布局视口为375px，我们把它分成10份，则1rem = 37.5px，

* 这时UI给定一个元素的宽为375px（设备独立像素），

* 我们只需要将它设置为375 / 37.5 = 10rem。

*/

const scale = root.clientWidth / 10

root.style.fontSize = scale + 'px'

}

//main.js

import Vue from 'vue'

import App from './App.vue'

import toRem from "./utils/toRem" //

toRem()

window.addEventListener('resize', toRem)

Vue.config.productionTip = false

new Vue({

render: h => h(App),

}).$mount('#app')

复制代码

然后就可以在vue中使用全局变量@rem进行移动端开发了

{{ username }}

了解脚手架及脚手架指令请移步个人博客

check out the

逐梦博客.

微信公众号：前端南玖

.songyao { }

复制代码

作者：南玖

链接：https://juejin.cn/post/7085931616136069156

来源：稀土掘金

著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

1.vw、vh适配

vw（Viewport Width）、vh(Viewport Height)是基于视图窗口的单位，是css3中提出来的，基于视图窗口的单位。

vh、vw方案即将视觉视口宽度 window.innerWidth和视觉视口高度 window.innerHeight 等分为 100 份。

上面的flexible方案就是模仿这种方案，因为早些时候vw还没有得到很好的兼容。

vw(Viewport's width)：1vw等于视觉视口的1%

vh(Viewport's height) :1vh 为视觉视口高度的1%

vmin : vw 和 vh 中的较小值

vmax : 选取 vw 和 vh 中的较大值

如果按视觉视口为375px，那么1vw = 3.75px，这时UI给定一个元素的宽为75px（设备独立像素），我们只需要将它设置为75 / 3.75 = 20vw。

这里我们同样可以借助less来实现，不用自己去手动算，算的过程我们交给less就好了，我们直接按照设计稿上去开发就行

// 还是rem.less 我们加一个@vw变量

@device-width: 375;

@rem: (@device-width/10rem);

@vw: (100vw/@device-width);

复制代码

{{ username }}

了解脚手架及脚手架指令请移步个人博客

check out the

逐梦博客.

微信公众号：前端南玖

.songyao { }