# 前言
随着美居中项目项目的不断迭代，项目不仅仅局限于手机端，平板端适配也逐步成为需求，故提供平板适配规范
# 实现思路
- 当前 hybrid 项目适配 pad 采用的是一套
template适配 两套css (手机端和平板端两套UI设计稿) - 根据现有hybrid模板中的
postcss-to-rem配置，根据手机端和平板端 设置1rem对应的px值 - 在原有手机端的css基础上，再写一套专用于平板端的css, 在平板上覆盖部分手机端样式，以达到适配平板的效果
# 适配步骤
- 获取userAgent 判断是否在pad环境
// /utils/index.js
const isPadFn = () => {
const ua = navigator.userAgent
const isAndroid = /(?:Android)/.test(ua)
const isFireFox = /(?:Firefox)/.test(ua)
const inPad =
/(?:iPad|PlayBook)/.test(ua) ||
(isAndroid && !/(?:Mobile)/.test(ua)) ||
(isFireFox && /(?:Tablet)/.test(ua)) ||
navigator.platform === 'MacIntel'
return inPad
}
export { isPadFn }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
- 页面响应式适配配置
移动端项目，一般采用postcss做预编译，px转rem, 一般rootValue为设计稿的十分之一，但由于适配ipad 要兼容两套设计稿，所以rootValue改为一个固定值, 同时另写逻辑 覆盖rem的值， 具体实现如下：
- 修改postcss配置
module.exports = {
plugins: {
autoprefixer: {},
'postcss-pxtorem': {
rootValue: 10, // 1倍设计稿(375)设为10， 2倍设计稿(750)设为20
propList: ['*'],
selectorBlackList: ['.ig-'],
exclude: [/mode_module/],
},
},
}
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
- 另写逻辑，覆盖html的
font-size值
// /utils/rem.js
import { isPadFn } from './index'
function setRem() {
const htmlWidth =
document.documentElement.clientWidth || document.body.clientWidth
//得到html的Dom元素
const htmlDom = document.getElementsByTagName('html')[0]
//设置根元素字体大小
// 375 默认大小10px; 375px = 37.5rem
if (isPadFn()) {
htmlDom.style.fontSize = htmlWidth / 76.8 + 'px'
} else {
htmlDom.style.fontSize = htmlWidth / 37.5 + 'px'
}
}
setRem()
window.addEventListener('resize', () => {
setRem()
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// main.js
...
// import 'amfe-flexible'
import '../../utils/rem.js' // 修改html font-size
1
2
3
4
5
2
3
4
5
- 页面代码中使用,修改最外层标签的class,采用pad样式覆盖部分手机端样式的形式
// /common/js/padFit.js
import { isPadFn } from '../../utils'
export default {
data() {
return {
isPad: isPadFn(),
}
},
}
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
// pages/index/app.vue
<template>
<div id="app" :class="['wrapper', isPad ? 'pad': '']">
<div class="content"></div>
</div>
</template>
...
<script>
import padFit from '../../common/js/padFit'
export default{
mixins:[padFit]
}
</script>
...
<style lang="scss" scoped>
@import './app.scss';
@import './app-pad.scss';
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// app.scss
#app {
.wrapper {
xxx
}
}
1
2
3
4
5
6
2
3
4
5
6
// app-pad.scss
#app.pad {
xxx
.wrapper {
xxx
}
}
1
2
3
4
5
6
7
2
3
4
5
6
7