前端样式兼容求助

查看 115|回复 10
作者:chenzhe   
不懂就问,现在写很多前端,图省事儿和习惯,都是用 vite CLI 或者 nextjs CLI 直接初始化项目,配合 tailwindcss 和基于 twcss 的 shadcn/ui(现在 twcss 都 4.0 了)直接写 UI 。
因为一直以来都是野路子写,没有去学过基础的 Babel 配置这些东西。
手头只有 iPhone ,所以每次自己这边测试都很正常,效果也挺好的,但是真的放在好多国产手机的自带浏览器上就会出现兼容问题。特别是稍老的低端安卓手机的自带浏览器上。
有没有大佬能解答下该如何配置可以解决这一问题,或者有相关方向的课程。

前端样式, 兼容性, babel

jackple   
可以看看 autoprefixer
https://v3.tailwindcss.com/docs/using-with-preprocessors
不过其实我不用 tailwindcss, 看着头疼
felbryiozzzz   
你说的这个问题没有银弹吧
最佳实践就是积累一套自己的布局标准习惯(比如 flex 一把梭,避免用 float 这些),尽可能少用一些很新很高级的特性
经常用到的一些高级 css 场景,总结一套兼容方案记录好就行
查兼容性可以用这个 https://caniuse.com/
Twinkle   
别说 v4 了,好多老机型 v3 都不行,可以考虑安装 postcss 插件来兼容一些样式:
https://www.npmjs.com/package/postcss-preset-env
wgbx   
PostCSS + Autoprefixer ,类似于 JS 的 Babel +Polyfill
iMiata   
回想起以前做全平台兼容适配的时候,日常就是从 https://caniuse.com/查兼容性和丢截图给测试
唯一的路子就是多查,MDN 现在也有类似 caniuse 的兼容表会放在下面
90e   
@felbryiozzzz 还真是,我现在写啥都是 flex ,手熟尔
Razio   
开发之前不看受众的吗,用户是老年机、或者内部系统,都要看场景再开发的吧。
crocoBaby   
不行的,没有万金油的方法,你要根据用户群体的范围去写
shaozelin030405   
找一些 polyfill ,nextjs 看看怎么配置使用 polyfill 。大不了问下 ai 呗(就这个思路就好了)
您需要登录后才可以回帖 登录 | 立即注册

返回顶部