jQuery
minxin文件的使用
在html对应的scss文件中的使用方法
PC端适配
@each $item in $screenList {
@include responsive($item) {
$scale: calculationScale($item);
margin: $mt*$scale 0 0 $ml*$scale;
}
}
移动端适配
@each $item in $mobileList {
@include responsiveMobile($item) {
$scale: calculationMobileScale($item);
$mt: 44px;
text-align: center;
margin: $mt*$scale 0 0;
}
}
mixin.scss文件
$optic: screen;
$is-hidpi: "(-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-device-pixel-ratio: 1.5),(min-resolution: 1.5dppx)";
$screen-px: 1920px;
$screen-xxl: 1920px;
$screen-xl: 1600px;
$screen-lg: 1440px;
$screen-md: 1366px;
$screen-sm: 1280px;
$screen-xs: 1024px;
$screenList: $screen-xxl, $screen-xl, $screen-lg, $screen-md, $screen-sm, $screen-xs;
@function calculationScale($width) {
@if $width == $screen-xxl {
@return round(($screen-xxl/$screen-px)*10000)/10000
} @else if $width == $screen-xl {
@return round(($screen-xl/$screen-px)*10000)/10000
} @else if $width == $screen-lg {
@return round(($screen-lg/$screen-px)*10000)/10000
} @else if $width == $screen-md {
@return round(($screen-md/$screen-px)*10000)/10000
} @else if $width == $screen-sm {
@return round(($screen-sm/$screen-px)*10000)/10000
} @else if $width == $screen-xs {
@return round(($screen-xs/$screen-px)*10000)/10000
}
}
@mixin responsive($width) {
@if $width == $screen-xxl {
@media #{$optic} and (max-width: $screen-xxl) {
@content;
}
} @else if $width == $screen-xl {
@media #{$optic} and (max-width: $screen-xl) {
@content;
}
} @else if $width == $screen-lg {
@media #{$optic} and (max-width: $screen-lg) {
@content;
}
} @else if $width == $screen-md {
@media #{$optic} and (max-width: $screen-md) {
@content;
}
} @else if $width == $screen-sm {
@media #{$optic} and (max-width: $screen-sm) {
@content;
}
} @else if $width == $screen-xs {
@media #{$optic} and (max-width: $screen-xs) {
@content;
}
}
}
$mobile-px: 375px;
$mobile-xl: 420px;
$mobile-lg: 414px;
$mobile-md: 375px;
$mobile-sm: 320px;
$mobileList: $mobile-xl, $mobile-lg, $mobile-md, $mobile-sm;
@function calculationMobileScale($width) {
@if $width == $mobile-xl {
@return round(($mobile-xl/$mobile-px)*100)/100
} @else if $width == $mobile-lg {
@return round(($mobile-lg/$mobile-px)*100)/100
} @else if $width == $mobile-md {
@return round(($mobile-md/$mobile-px)*100)/100
} @else if $width == $mobile-sm {
@return round(($mobile-sm/$mobile-px)*100)/100
}
}
@mixin responsiveMobile($width) {
@if $width == $mobile-xl {
@media #{$optic} and (max-width: $mobile-xl) {
@content;
}
} @else if $width == $mobile-lg {
@media #{$optic} and (max-width: $mobile-lg) {
@content;
}
} @else if $width == $mobile-md {
@media #{$optic} and (max-width: $mobile-md) {
@content;
}
} @else if $width == $mobile-sm {
@media #{$optic} and (max-width: $mobile-sm) {
@content;
}
}
}
VUE
安装依赖
npm i lib-flexible -S
npm i px2rem-loader -D
安装完成以后在main.js引入lib-flexible
import 'lib-flexible'
在根目录src中新建postcss.config.js文件
module.exports = {
plugins: {
// 兼容浏览器,添加前缀
autoprefixer: {
overrideBrowserslist: [
"> 1%",
"last 2 versions",
"not ie <= 8",
"safari >= 7",
],
},
"postcss-pxtorem": {
rootValue: 16,
propList: ["*", "!border"], // 属性的选择器,*表示通用
unitPrecision: 2, // 保留rem小数点多少位
selectorBlackList: [".ig-"], // 忽略的选择器 .ig- 表示 .ig- 开头的都不会转换
// selectorBlackList: ['.radius'], //则是一个对css选择器进行过滤的数组,比如你设置为['fs'],那例如fs-xl类名,里面有关px的样式将不被转换,这里也支持正则写法。
},
},
};
在根目录src/utils中新建setRem.js等比适配文件
可直接复制以下代码
// 结合 vue.config.js中的postcsstorem进行设置
function setRem() {
var def = 32 / 750; // 表示750的设计图,使用100PX的默认值
var bodyWidth = document.body.clientWidth; // 当前窗口的宽度
var rem = bodyWidth * def; // 以默认比例值乘以当前窗口宽度,得到该宽度下的相应FONT-SIZE值
setFontSize(rem);
}
//pc端
function setRemPC() {
// var def = 16 / 1920; // 表示1920的设计图,使用100PX的默认值
// var bodyWidth = document.body.clientWidth; // 当前窗口的宽度
// var rem = bodyWidth * def; // 以默认比例值乘以当前窗口宽度,得到该宽度下的相应FONT-SIZE值
var rem = 16; // 以默认比例值乘以当前窗口宽度,得到该宽度下的相应FONT-SIZE值
setFontSize(rem);
}
function setFontSize(rem) {
document.getElementsByTagName("html")[0].style.fontSize = rem + "px";
document.getElementsByTagName("body")[0].style.fontSize = rem + "px";
setTimeout(() => {
document.getElementsByTagName("html")[0].style.fontSize = rem + "px";
document.getElementsByTagName("body")[0].style.fontSize = rem + "px";
}, 300);
}
export { setRem, setRemPC };
在app.vue中引入适配文件
import { setRem, setRemPC } from '@/utils/setRem'
全局使用
created() {
// 临时数据对接使用--后续需删除
/* Vue.ls.set(
ACCESS_TOKEN,
'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJleHAiOjE2NTk2NjcyMzQsInVzZXJuYW1lIjoiYWRtaW4ifQ.6LhKOFOD0_HE1ksbXPP6dnseEUb23mI6Hvev4kP9lJU'
)*/
this.responseRem()
window.addEventListener('resize', this.responseRem) //浏览器窗口大小改变时调用rem换算方法
},
methods: {
// 改变窗口大小时重新设置 rem
responseRem() {
if (document.body.clientWidth < 600) {
console.log('setRem mobile')
setRem()
} else {
console.log('setRem PC')
setRemPC()
}
},
},