js移动端布局适配方案全方位解析
移动端布局
- 设备像素比 这里只做简单说明具体概念可自行百度
物理像素（显示屏所展现的像素）
逻辑像素（css中设置的像素）
dpr=物理像素/逻辑像素
布局方式
- vw+rem
1vw=视口宽度1%
100vw=视口宽度100%
例子：设计图是640px，则视口宽度是320px；
100vw=320px
1vw=3.2px
100px/3.2=31.25
100px=31.25vw
根元素的大小设置31.25vw
除以2再除以100 单位rem
- calc函数
html{
font-size: calc(100vw / 7.5)
}
*{
margin: 0;
padding: 0
}
/* 测试 设计稿750px dpr2 7.5rem=375px=100vw 1rem=50px 实际测量除以100 */
ul{
width: 7.5rem;
height: 3.75rem;
font-size: 0.4rem;
background-color: pink
}
- flexible.js
链接地址 flexible.js
代码分析和及如何方便快捷使用
(function flexible (window, document) {
var docEl = document.documentElement
var dpr = window.devicePixelRatio || 1
// adjust body font size
function setBodyFontSize () {
if (document.body) {
document.body.style.fontSize = (12 * dpr) + 'px'
}
else {
document.addEventListener('DOMContentLoaded', setBodyFontSize)
}
}
setBodyFontSize();
// set 1rem = viewWidth / 10
function setRemUnit () {
var rem = docEl.clientWidth / 24
//这里可以根据自己的设计图来平分等份 手机设计稿一般为640px或者750px 640px的可以划分为10等份这样1rem=64px了 750px可以划分为7.5份 则1rem=100px
//大屏适配1920*1080 1920px 1920/24 = 80px 也就是1rem = 80px hbuilder编辑器默认1rem=16px 可以到工具--设置--编辑设置里修改为80 这样就可以自动转换了啦。。
// vscode 可以下载个cssrem插件 然后找到该插件设置下就可以实现自动转换了
docEl.style.fontSize = rem + 'px'
}
setRemUnit()
// reset rem unit on page resize
window.addEventListener('resize', setRemUnit)
window.addEventListener('pageshow', function (e) {
if (e.persisted) {
setRemUnit()
}
})
// detect 0.5px supports
if (dpr >= 2) {
var fakeBody = document.createElement('body')
var testElement = document.createElement('div')
testElement.style.border = '.5px solid transparent'
fakeBody.appendChild(testElement)
docEl.appendChild(fakeBody)
if (testElement.offsetHeight === 1) {
docEl.classList.add('hairlines')
}
docEl.removeChild(fakeBody)
}
}(window, document))
vue项目实战之postcss-pxtorem
postcss-pxtorem文档传送门结合flexible.js实现px自动转换rem
- 第一步，安装相关插件
npm i -S amfe-flexible
npm install postcss-pxtorem --save-dev - 第二步，在main.js入口文件引入flexible.js
import 'flexible.js '这里要根据自己的文件路劲进行导入 - 第三步，新建 postcss.config.js 文件 （与package.json文件同级）配置一下代码
module.exports = {
plugins: {
autoprefixer: {
browsers: ['Android >= 4.0', 'iOS >= 7']
},
'postcss-pxtorem': {
rootValue: 75,//flexible.js 默认是 可视区的宽度/10 这里是设计稿750px 1rem = 75px
propList: ['*'],//任何属性的值都会转换
minPixelValue: 2,//忽略1px 如 1px solid gray 还是1px
}
}
}
vue项目实战之postcss-px-to-viewport
postcss-px-to-viewport文档传送门
- 第一步，安装
npm install postcss-px-to-viewport --save-dev - 第二步，新建 postcss.config.js 文件 （与package.json文件同级）配置一下代码
module.exports = {
plugins: {
autoprefixer: {},
'postcss-px-to-viewport': {
viewportWidth: 750,
unitPrecision: 3,
viewportUnit: "vw",
selectorBlackList: [],
minPixelValue: 1,
mediaQuery: false
}
}
}
另一种方式 postcss-px-to-viewport 在vue.config.js文件中配置
module.exports = {
css: {
loaderOptions: {
postcss: {
plugins: [
require("postcss-px-to-viewport")({
unitToConvert: "px",
//设计图的宽度
viewportWidth: 375,
//精度
unitPrecision: 3,
propList: ["*"],
viewportUnit: "vw",
fontViewportUnit: "vw",
selectorBlackList: [],
minPixelValue: 1,
mediaQuery: false,
replace: true,
exclude: /(\/|\\)(node_modules)(\/|\\)/,
}),
],
},
},
},
}