写在前面的话:看了这篇文章,有些东西名词啥的不懂的,或者有疑问的推荐百度,因为写的太多真的显得很啰嗦!
1.移动端开发适配
目前移动端适配,在市面上主流适配方案无非就两种,rem方案和vw方案。这些方案,就可以自动适配不同移动端屏幕尺寸动态缩放。其实他的适配,你可以理解为整个页面进行放大缩小,充满整个屏幕。记得要在html设置如下meta
<meta name="viewport" content="width=device-width, initial-scale=1.0">
- vw方案:把px转换为vw单位,通过设置viewportWidth:750,750px = 100vw,1vw = 7.5px,这里就跟小程序上的rpx单位类似。
- rem方案:把px转换为rem单位,受到html上的font-size影响。但是我们不能把这个font-size写死,它应该是基于屏幕大小动态变化,才能适配不同的手机屏幕。这里可以借助插件帮我们自动设置基准值和自动把px转换为rem单位,在这里有介绍。
- 两个方案demo
- mian分支:无vw方案与rem方案,个人模板
- mobile分支:基于main分支,加入了vw方案与rem方案,可以通过vite.config.ts 修改useVwModel值进行切换
- mobile_vant:基于mobile分支,引入了vant框架,进行了vant配置
- 演示demo
html {
//假设375的设计稿,设置了基准值为20px,那么当屏幕为750的时候,这里的font-size大小应该为40px。因为相当于整体放大了两倍
font-size: 20px;//1rem = 20px
}
//375:font-size:20px 750:font-size:40px
<div style="font-size: 1rem;">国破山河在城春草木深</div>
//375:font-size:40px 750:font-size:80px
<div style="font-size: 2rem;">感时花溅泪恨别鸟惊心</div>
2.vw适配方案(推荐)
只需要安装插件:postcss-px-to-viewport
- 安装:npm install postcss-px-to-viewport --save-dev
- vite配置参考如下:
//在vite.config.ts中
// vw方案(无像素差):px自动转换vw
import pxtovw from "postcss-px-to-viewport"
export default defineConfig({
css: {
postcss: {
plugins: [
autoprefixer({
overrideBrowserslist: ['Android 4.1', 'iOS 7.1', 'Chrome > 31', 'ff > 31', 'ie >= 8']
}),
pxtovw({
unitToConvert: 'px', // 要转化的单位
viewportWidth: 750, //100vw=750px,UI设计稿的宽度,vant是375。可参考这个:https://juejin.cn/post/6961737808339795975
unitPrecision: 6, // 转换后的精度,即小数点位数
propList: ['*'], // 指定转换的css属性的单位,*代表全部css属性的单位都进行转换
viewportUnit: 'vw', // 指定需要转换成的视窗单位,默认vw
fontViewportUnit: 'vw', // 指定字体需要转换成的视窗单位,默认vw
selectorBlackList: ['ignore-'], // 指定不转换为视窗单位的类名,
minPixelValue: 1, // 默认值1,小于或等于1px则不进行转换
mediaQuery: true, // 是否在媒体查询的css代码中也进行转换,默认false
replace: true, // 是否转换后直接更换属性值
landscape: false, // 是否处理横屏情况
// exclude: [/node_modules\/vant/i]
})
],
},
},
})
3.rem适配方案(有0.1px误差)
需要安装两个插件,1rem=html上的font-size
插件一:lib-flexible —— 用于自动设置 rem 基准值(也就是html上的font-size),切记需要再main.js中 import ‘amfe-flexible’ 后才会自动设置基准值
插件二:postcss-pxtorem —— 是一款 postcss 插件,用于将px单位转化为 rem(你可以直接在项目中写px,它会自动帮你转换为rem单位)
-
安装插件一:npm i amfe-flexible -D
-
安装插件二:npm i postcss-pxtorem -D
-
在main.js文件中: import ‘amfe-flexible’
-
安装(自动管理浏览器前缀,非必装):npm install autoprefixer --save
-
如果使用了unocss参考配置, 使用下面的unocss插件把自带的rem转换为px,在通过postcss-pxtorem转换为rem
-
unocss插件(把默认的rem单位转换为px,完整配置参考demo):npm install -D @unocss/preset-rem-to-px
-
vite配置参考如下:
//在vite.config.ts中
// rem方案(部分转换后会有0.1px的像素差,推荐vw方案):css自动转换为rem,切记需要再main.js中 import 'amfe-flexible' 自动设置基准值
import postCssPxToRem from 'postcss-pxtorem'
export default defineConfig({
css: {
postcss: {
plugins: [
autoprefixer({
overrideBrowserslist: ['Android 4.1', 'iOS 7.1', 'Chrome > 31', 'ff > 31', 'ie >= 8']
}),
postCssPxToRem({
// 自适应,px>rem转换
rootValue:75, // 这里代表的是1rem等于多少rootValue的px。75表示750设计稿,37.5表示375设计稿
propList: ['*'], // 需要转换的属性,这里选择全部都进行转换
selectorBlackList: ['norem', 'ignore'], // 过滤掉norem-开头的class,不进行rem转换
mediaQuery: false, // 允许在媒体查询中转换 px
}),
],
},
}
})
4.原子化插件 unocss 与 tailwindcss
原子化的意思就是,把css的每一个属性,定义成一个class,这样子的话,我们写样式的时候,可以直接写,无需再命名class,好维护,如颜色大小主题等。部分样式参考:
style="width:100%;height:50px;display:flex;flex-direction:row;background:white;"
// unocss || tailwindcss
class="w-full h-[50px] flex flex-row bg-white"
就我使用一段时间以来,我最大的感受的就是太爽了,再也不需要 命名class,写起来很丝滑。但是我认为它也有一些弊端,比如:1.前期有个学习记忆的成本(多敲就好)。2.个人开发又快又好的,团队开发可能要被骂娘(强制别人学习使用囧),除非他们也用。3.复用问题,因为它分的太细了,如果一些组合样式经常要用到,不好进行复用,可以通过使用@apply解决。
unocss是基于tailwindcss的。虽然我用的unocss,但是我查文档用的tailwindcss,写法跟tailwindcss是一样的 囧!
这两个框架优劣百度更详细
5.引入移动端vant框架
vant框架的设计稿是375,如果我们自身的设计是375那就无需做额外的配置,但是如果我们是750的设计稿,那么rem方案和vw方案需要多做一些配置。这里配置参考两个方案demo
6.关于rpx
rpx是微信小程序上的单位,750rpx=100vw,在设计稿750的情况下,1px = 1rpx。在设计稿为375的情况下,2px = 1rpx。建议小程序开发使用750设计稿!
- uniapp项目运行在浏览器上会把rpx转换为rem,rem适配方案
- uniapp运行在小程序上,则不会进行转换。这里超出750,长度溢出了。
7.使用unocss插件后,实现rpx一样的书写方式
移动端开发,我们在使用uniapp框架开发后,我们可以无任何负担的使用rpx像素,因为uniapp在编译对应平台的时候,会自动帮我们转换对应的像素单位。也就是说,750的设计稿,设计稿的宽高是多少,我们就可以写多少的rpx大小。
通过使用vw或者rem适配方案后,我们也可以实现同样的效果。我们想设置长度为500,但是我们原子化的插件 w-1 默认设置大小为下4px,w-125才为500px,书写有负担。
我们不得不采用以下方式:
这样可以实现同样的效果,但是问题是繁琐了,我们能不能直接通过 w-500实现呢?可以可以的,这些都是可以自己定制的。这里我们生成一个新的属性来做区分,这里定义一个ww 和 hh 代表的就是 你给我多少,我就是多少px像素。
//uno.config.js
export default defineConfig({
// 预设的别名,可以进行一些组合使用
shortcuts: [
['center', 'flex items-center justify-center'],
['btn', 'px-2 py-1 rounded inline-block bg-teal-700 text-white cursor-pointer !outline-none hover:bg-teal-800 disabled:cursor-default disabled:bg-gray-600 disabled:opacity-50'],
['icon-btn', 'inline-block cursor-pointer select-none opacity-75 transition duration-200 ease-in-out hover:opacity-100 hover:text-teal-600'],
],
rules:[
[/^ww-(\d+)$/, ([, d]) => ({ width: `${d}px` })],
[/^hh-(\d+)$/, ([, d]) => ({ height: `${d}px` })],
]
})
也可以修改默认的,这里列举部分:
这种方式也不是最优解,我们使用官方的一个插件,上面也有提到,把unocss默认的rem单位改为px单位安装使用文档。
因为它默认的baseFontSize为16px=1rem,w-1=4px=0.25rem,
我们要想实现w-1=1px,只需要把baseFontSize改为4px即可。
presetRemToPx({
baseFontSize:4,//默认16(1rem=16px),改为4以后,1rem=1px,方便移动端直接使用px单位
}),
通过 http://localhost:5173/__unocss
地址查看编译的样式
8.关于uniapp使用unocss
推荐这个项目uni-app vue3中使用,它是基于uniapp官方模板。clone这个项目后,修改package.json
“unocss-preset-weapp”: “^0.53.5”,然后通过pnpm i安装依赖
这个可以直接在uniapp运行,但是这个unocss插件提示支持不好,推荐用vscode。所以在vscode使用如下:
- 运行在浏览器:pnpm run dev:h5
- 运行在小程序:pnpm run dev:mp-weixin,但是它只是实时监听文件变动和生成最新代码,你需要手动启动微信开发者工具并双击打开项目。
打开后,后续实时修改能够实时更新!
9.演示demo