1、如果你只是简单的只适配移动端,不需要适配pc端的话
首先在head标签里加上meta
<meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover">
而后再将写好的脚本引入即可(将下面代码写在一个文件中,在head中引用)
<script src="/plugin/lib-flexible.min.js"></script>
!(function(e, t) {
function n() {
t.body ? (t.body.style.fontSize = 12 * o + 'px') : t.addEventListener('DOMContentLoaded', n)
}
function d() {
var e = i.clientWidth / 10
i.style.fontSize = e + 'px'
}
var i = t.documentElement,
o = e.devicePixelRatio || 1
if (
(n(),
d(),
e.addEventListener('resize', d),
e.addEventListener('pageshow', function(e) {
e.persisted && d()
}),
o >= 2)
) {
var a = t.createElement('body'),
s = t.createElement('div')
;(s.style.border = '.5px solid transparent'),
a.appendChild(s),
i.appendChild(a),
1 === s.offsetHeight && i.classList.add('hairlines'),
i.removeChild(a)
}
})(window, document)
2、如果是需要兼容pc端和移动端,那么meta不变,脚本代码改为以下
!(function(e, t) {
function n() {
t.body ? (t.body.style.fontSize = 12 * o + 'px') : t.addEventListener('DOMContentLoaded', n)
}
// 判断是否是移动端
function isMobilePlatform() {
const userAgent = window.navigator.userAgent.toLowerCase()
if (/(iphone|ipad|ipod|ios|android)/gi.test(userAgent)) {
return true
} else {
return false
}
}
function d() {
let isMobile = isMobilePlatform()
if (isMobile) {
var e = i.clientWidth / 10
i.style.fontSize = e + 'px'
} else {
if (t.body) {
// pc端的最大宽度的设置
t.body.style.maxWidth = 768 + 'px'
t.body.style.margin = '0 auto'
} else {
t.addEventListener('DOMContentLoaded', d)
}
// pc端的最大宽度为多少,则他的fontSize为它的十分之一,量尺寸的时候使用蓝湖将尺寸调为pc端的最大尺寸
i.style.fontSize = 76.8 + 'px'
}
}
var i = t.documentElement,
o = e.devicePixelRatio || 1
if (
(n(),
d(),
e.addEventListener('resize', d),
e.addEventListener('pageshow', function(e) {
e.persisted && d()
}),
o >= 2)
) {
var a = t.createElement('body'),
s = t.createElement('div')
;(s.style.border = '.5px solid transparent'),
a.appendChild(s),
i.appendChild(a),
1 === s.offsetHeight && i.classList.add('hairlines'),
i.removeChild(a)
}
})(window, document)
如果想要在移动端写px的话,react可以下载 postcss-pxtorem,vue使用px2rem插件。