说明:针对于vue实现屏幕适配,可以根据淘宝推出的lib-flexible + px2rem-loader进行弹性布局,开发者可以根据设计图上的px单位直接布局,而在浏览器中可以直接将px转换为rem。
无论是移动端还是pc都可以使用lib-flexible!!!
下面以我实际开发为例(vuecli2)
使用:
1.首先先来安装下lib-flexible
npm i lib-flexible --s
2.在项目入口文件main.js中添加如下代码,引入flexible
import 'lib-flexible'
3.安装px2rem-loader
在使用flexible插件时 会自动把px转换成rem,在vue的脚手架中安装过lib-flexible之后 ,使用px2rem将px转换成rem。
npm install px2rem-loader
4.配置px2rem-loader
在lib-flexible中找到refreshRem这个方法
function refreshRem(){
var width = docEl.getBoundingClientRect().width;
if (width / dpr > 540) {
width = 540 * dpr; //这个好像针对于移动端,但我们可以根据实际情况更改
}
var rem = width / 10;
docEl.style.fontSize = rem + 'px';
flexible.rem = win.rem = rem;
}
更改为:
function refreshRem(){
var width = docEl.getBoundingClientRect().width;
if (width / dpr > 540) {
width = width* dpr; //更改后
}
var rem = width / 10;
docEl.style.fontSize = rem + 'px';
flexible.rem = win.rem = rem;
}
修改build/utils.js, 在cssLoader变量中
移动端:
const px2remLoader = {
loader: 'px2rem-loader',
options: {
remUint: 75 //设计稿根据750*1334,可根据实际调整rem与px之间转换比例
// remPrecision: 8//换算的rem保留几位小数点
}
}
pc端:
const px2remLoader = {
loader: 'px2rem-loader',
options: {
remUint: 192 //设计稿根据1920px,rem为px的十分之一
// remPrecision: 8//换算的rem保留几位小数点
}
}
如果写的原生js的项目,大家可以直接利用script引入flexible.js就可以了
由于flexible自适应可以删除meta标签
<meta name="viewport" content="width=device-width,initial-scale=1.0">
再分享下自己以前写项目另一种适配的方法:
在src新建js文件夹新建remConfig.js
if ((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
// alert('手机端')
var abc = document.documentElement.clientWidth;
var bl = abc/640//设计稿的宽度
var fontSize = 100*bl
document.documentElement.style.fontSize = fontSize + "px"
}else{
// alert('PC端')
// 75代表设计图默认值
var whdef = 75 / 1920; // 表示1920的设计图,使用100PX的默认值
var wH = window.innerHeight; // 当前窗口的高度
var wW = window.innerWidth; // 当前窗口的宽度
var rem
if(wW <= 1200) {
rem = 1200 * whdef;
} else {
rem = wW * whdef; // 以默认比例值乘以当前窗口宽度,得到该宽度下的相应FONT-SIZE值
}
$('html').css('font-size', rem + "px");
$(window).resize(function() // 绑定到窗口的这个事件中
{
var whdef = 75 / 1920; // 表示1920的设计图,使用100PX的默认值
var wH = window.innerHeight; // 当前窗口的高度
var wW = window.innerWidth; // 当前窗口的宽度
if(wW <= 1200) {
rem = 1200 * whdef;
} else {
rem = wW * whdef; // 以默认比例值乘以当前窗口宽度,得到该宽度下的相应FONT-SIZE值
}
$('html').css('font-size', rem + "px");
var H = document.documentElement.scrollHeight;
// $('html').height(H);
});
}
</script>
项目重启后生效,以上我对于h5项目实现屏幕适配的解决方案,希望可以帮到大家