JLNTV_IPD/vue-h5-template
4
0
Fork 0
mirror of https://github.com/sunniejs/vue-h5-template.git synced 2025-04-06 03:57:50 +08:00
Code Issues Projects Releases Wiki Activity

chore: 使用 postcss-mobile-forever 进行屏幕适配，提升各端可访问性

Browse Source
This commit is contained in:
wswmsword 2023-02-25 19:02:57 +08:00
parent cb41b76e06
commit a9da19a5c6
6 changed files with 46 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@ -11,7 +11,7 @@
<title>Vite App</title>
</head>
<body>
<div id="app"></div>
<div id="app" class="root-class"></div>
<script type="module" src="/src/main.ts"></script>
<script>
window.onload = function () {

2
package.json
View File

@ -40,7 +40,6 @@
"@vitejs/plugin-vue-jsx": "^3.0.0",
"amfe-flexible": "^2.2.1",
"autoprefixer": "^10.4.13",
"cnjm-postcss-px-to-viewport": "^1.0.0",
"consola": "^2.15.3",
"cross-env": "^7.0.3",
"eruda": "^2.11.2",
@ -55,6 +54,7 @@
"postcss": "^8.4.20",
"postcss-html": "1.5.0",
"postcss-less": "^6.0.0",
"postcss-mobile-forever": "^2.1.2",
"prettier": "^2.8.4",
"rollup-plugin-visualizer": "^5.9.0",
"stylelint": "^15.2.0",

21
pnpm-lock.yaml generated
View File

@ -17,7 +17,6 @@ specifiers:
amfe-flexible: ^2.2.1
autoprefixer: ^10.4.13
axios: 1.3.4
cnjm-postcss-px-to-viewport: ^1.0.0
consola: ^2.15.3
cross-env: ^7.0.3
dayjs: ^1.11.7
@ -36,6 +35,7 @@ specifiers:
postcss: ^8.4.20
postcss-html: 1.5.0
postcss-less: ^6.0.0
postcss-mobile-forever: ^2.1.2
prettier: ^2.8.4
rollup-plugin-visualizer: ^5.9.0
stylelint: ^15.2.0
@ -90,7 +90,6 @@ devDependencies:
'@vitejs/plugin-vue-jsx': 3.0.0_vite@4.1.4+vue@3.2.47
amfe-flexible: 2.2.1
autoprefixer: 10.4.13_postcss@8.4.20
cnjm-postcss-px-to-viewport: 1.0.0_postcss@8.4.20
consola: 2.15.3
cross-env: 7.0.3
eruda: 2.11.2
@ -105,6 +104,7 @@ devDependencies:
postcss: 8.4.20
postcss-html: 1.5.0
postcss-less: 6.0.0_postcss@8.4.20
postcss-mobile-forever: 2.1.2_postcss@8.4.20
prettier: 2.8.4
rollup-plugin-visualizer: 5.9.0
stylelint: 15.2.0
@ -3206,15 +3206,6 @@ packages:
engines: {node: '>=0.8'}
dev: true
/cnjm-postcss-px-to-viewport/1.0.0_postcss@8.4.20:
resolution: {integrity: sha512-vokFS5qvl7JG/W79JYGZgA19LiVvDzQ5aSIQvnZiZAK2lumP+MP8WCs2AU/fK1aSIBpVmqgRpU4m27RBJ2F7rw==}
peerDependencies:
postcss: ^8.4.14
dependencies:
object-assign: 4.1.1
postcss: 8.4.20
dev: true
/collection-visit/1.0.0:
resolution: {integrity: sha512-lNkKvzEeMBBjUGHZ+q6z9pSJla0KWAQPvtzhEV9+iGyQYG+pBpl7xKDhxoNSOZH2hhv0v5k0y2yAM4o4SjoSkw==}
engines: {node: '>=0.10.0'}
@ -7015,6 +7006,14 @@ packages:
resolution: {integrity: sha512-3sOlxmbKcSHMjlUXQZKQ06jOswE7oVkXPxmZdoB1r5l0q6gTFTQSHxNxOrCccElbW7dxNytifNEo8qidX2Vsig==}
dev: true
/postcss-mobile-forever/2.1.2_postcss@8.4.20:
resolution: {integrity: sha512-tiQa6rIgeTdhhQF+pXsgFbUcIPEaPKdvobOBK4hGHrqu5M0z2n+dlvipZI1dAQntMCKLDV5c0eu62nXo1E3iiw==}
peerDependencies:
postcss: ^8.0.0
dependencies:
postcss: 8.4.20
dev: true
/postcss-prefix-selector/1.16.0_postcss@5.2.18:
resolution: {integrity: sha512-rdVMIi7Q4B0XbXqNUEI+Z4E+pueiu/CS5E6vRCQommzdQ/sgsS4dK42U7GX8oJR+TJOtT+Qv3GkNo6iijUMp3Q==}
peerDependencies:

31
postcss.config.js
View File

@ -1,5 +1,6 @@
const path = require('path');
/** 这个方法是针对处理vant组件下的设计稿为375问题 */
const judgeComponent = (file) => {
const ignore = ['vant', '@nutui', '@varlet'];
return ignore.some((item) => path.join(file).includes(path.join('node_modules', item)));
@ -8,25 +9,21 @@ const judgeComponent = (file) => {
module.exports = {
plugins: {
autoprefixer: { overrideBrowserslist: ['Android 4.1', 'iOS 7.1', 'Chrome > 31', 'ff > 31', 'ie >= 8'] },
'cnjm-postcss-px-to-viewport': {
unitToConvert: 'px', // 要转化的单位
viewportWidth: 750, // UI设计稿的宽度
'postcss-mobile-forever': {
rootClass: 'root-class',
viewportWidth: (file) => (judgeComponent(file) ? 375 : 750), // UI设计稿的宽度
unitPrecision: 6, // 转换后的精度，即小数点位数
propList: ['*'], // 指定转换的css属性的单位，*代表全部css属性的单位都进行转换
viewportUnit: 'vw', // 指定需要转换成的视窗单位，默认vw
fontViewportUnit: 'vw', // 指定字体需要转换成的视窗单位，默认vw
minPixelValue: 1, // 默认值1，小于或等于1px则不进行转换
mediaQuery: true, // 是否在媒体查询的css代码中也进行转换，默认false
replace: true, // 是否转换后直接更换属性值
landscape: false, //是否添加根据 landscapeWidth 生成的媒体查询条件 @media (orientation: landscape)
landscapeUnit: 'rem', //横屏时使用的单位
landscapeWidth: 1134, //横屏时使用的视口宽度
include: [],
exclude: [], // 设置忽略文件，用正则做目录名匹配
customFun: ({ file }) => {
// 这个自定义的方法是针对处理vant组件下的设计稿为375问题
const designWidth = judgeComponent(file) ? 375 : 750;
return designWidth;
include: null,
exclude: null, // 设置忽略文件，用正则做目录名匹配
border: true, // 横屏和桌面端的边框
disableDesktop: false, // 关闭桌面端适配
disableLandscape: false, // 关闭横屏适配
disableMobile: false, // 关闭竖屏适配
mobileConfig: {
viewportUnit: 'vw', // 指定需要转换成的视窗单位，默认vw
fontViewportUnit: 'vw', // 指定字体需要转换成的视窗单位，默认vw
replace: true, // 是否转换后直接更换属性值
},
},
},

3
src/App.vue
View File

@ -8,6 +8,9 @@
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.root-class {
color: #2c3e50;
}
</style>

18
src/layout/basic/index.vue
View File

@ -8,7 +8,15 @@
</RouterView>
<RouterView v-if="!$route.meta.keepAlive" :key="$route.path" />
</div>
<nut-tabbar unactive-color="#364636" active-color="#1989fa" bottom v-model="activeTab" v-show="tabbarVisible" @tab-switch="tabSwitch">
<nut-tabbar
class="tabbar-wrapper"
unactive-color="#364636"
active-color="#1989fa"
bottom
v-model="activeTab"
v-show="tabbarVisible"
@tab-switch="tabSwitch"
>
<nut-tabbar-item v-for="item in tabItem" :key="item.key" :tab-title="$t(`tabbar.${item.key}`)" :icon="item.icon" />
</nut-tabbar>
</template>
@ -87,4 +95,12 @@
padding-left: 30px;
padding-right: 30px;
}
.tabbar-wrapper {
position: fixed;
bottom: 0px;
left: 0px;
width: 100%; // 用于子元素 tabbar 的宽度
transform: translate(0); // 令该元素形成 tabbar 的包含块，使得 tabbar 的 fixed 定位宽度基于该元素
}
</style>