Skip to content

🚀 v3.0 版本 - 优化项 #129

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Closed
6 tasks done
CharleeWa opened this issue Oct 22, 2024 · 11 comments
Closed
6 tasks done

🚀 v3.0 版本 - 优化项 #129

CharleeWa opened this issue Oct 22, 2024 · 11 comments
Labels
new features

Comments

@CharleeWa
Copy link
Collaborator

CharleeWa commented Oct 22, 2024 •
edited
Loading

📝 有任何想法和建议，欢迎留言补充
@CharleeWa CharleeWa pinned this issue Oct 22, 2024
@ilaipi
Copy link

ilaipi commented Nov 1, 2024

可不可以换用tailwind？

@CharleeWa
Copy link
Collaborator Author

可不可以换用tailwind？

你好，原子化方案目前主要选择 unocss。它有一个很方便的子包，可以帮助我们把 rem 转换成 px， 然后再由 postcss 插件把 px 转换 为 vw 单位进行移动端适配。所以要平替为 tailwind 话，可能需要自己处理这种情况。

@ilaipi
Copy link

ilaipi commented Nov 2, 2024 via email

@CharleeWa
Copy link
Collaborator Author

CharleeWa commented Nov 2, 2024 •
edited
Loading

@ilaipi 是这样，即便我们有时也通过 tailwindcss 文档写原子化 CSS 。因为 unocss 是一个原子化 CSS 引擎，并不是某一个原子化框架（比如：windcss、tailwindcss）。unocss 没必要自己再实现一个 CSS 框架，或者类库，它更多是在上层提供一组 CSS 实用工具和一些有用的预设，来解决开发体验等问题。这也是 unocss 没有原子类使用说明，只有相关预设和配置说明文档的原因。理解了这层，就不纠结去用 unocss 的预设，去看 tailwindcss 文档了，它们甚至是一个东西。

@SublimeCT
Copy link
Contributor

  • 把 husky 替换为更简单的 simple-git-hooks

可以在 pre-commit hook 中使用 lint-staged 调用 lint, 这会只对暂存的文件执行 lint, 而不是对所有文件执行 lint

@CharleeWa
Copy link
Collaborator Author

  • 把 husky 替换为更简单的 simple-git-hooks

可以在 pre-commit hook 中使用 lint-staged 调用 lint, 这会只对暂存的文件执行 lint, 而不是对所有文件执行 lint

没错！很好的提示，谢谢

@wswmsword
Copy link
Contributor

mobile-forever 最近更新了 appContainingBlock 和 necessarySelectorWhenAuto 的用法，使用时只要设置 appContainingBlock: "auto"，并在全局样式文件中包含 body {}，即可自动处理 fixed 定位矫正问题，无需再自己设置 rootContainingBlockSelectorList。

为了减小使用负担，necessarySelectorWhenAuto 默认值是 body，通常全局样式文件里也包含了 body {}，所以使用的时候几乎不用关注它。

原理上，会为 necessarySelectorWhenAuto 指定的元素（默认 <body>）替代浏览器窗口作为应用的根包含块，利用了 contain: layer，不会触发 gpu 渲染，所以不会有频繁 gpu 渲染引起的性能问题，但不确定有没有其它副作用。所有 fixed 元素尺寸都会基于这个新的 <body> 包含块，浏览器自动处理。

这样可以解决大量 rootContainingBlockSelectorList 和原子化 CSS 框架单属性单选择器问题。

配置，演示

是否考虑更新 fixed 矫正定位的方式？

@CharleeWa
Copy link
Collaborator Author

mobile-forever 最近更新了 appContainingBlock 和 necessarySelectorWhenAuto 的用法，使用时只要设置 appContainingBlock: "auto"，并在全局样式文件中包含 body {}，即可自动处理 fixed 定位矫正问题，无需再自己设置 rootContainingBlockSelectorList。

为了减小使用负担，necessarySelectorWhenAuto 默认值是 body，通常全局样式文件里也包含了 body {}，所以使用的时候几乎不用关注它。

原理上，会为 necessarySelectorWhenAuto 指定的元素（默认 <body>）替代浏览器窗口作为应用的根包含块，利用了 contain: layer，不会触发 gpu 渲染，所以不会有频繁 gpu 渲染引起的性能问题，但不确定有没有其它副作用。所有 fixed 元素尺寸都会基于这个新的 <body> 包含块，浏览器自动处理。

这样可以解决大量 rootContainingBlockSelectorList 和原子化 CSS 框架单属性单选择器问题。

配置，演示

是否考虑更新 fixed 矫正定位的方式？

太好了！我们需要这个。

CharleeWa added a commit that referenced this issue Feb 19, 2025
@CharleeWa
refactor: Update viewport containing block config (#129)
24f15fd
@CharleeWa CharleeWa changed the title 🚀 新特性 🚀 v3.0 版本 - 优化项 Mar 5, 2025
@CharleeWa
Copy link
Collaborator Author

v 3.0 优化项已完成

@PdxLook
Copy link

PdxLook commented May 21, 2025

可否考虑 加一个 更新提示； 更新代码后，提示用户刷新

@CharleeWa
Copy link
Collaborator Author

可否考虑 加一个 更新提示； 更新代码后，提示用户刷新

感谢建议！这个功能在用户长时间停留页面的场景下确实很实用。但目前我们的项目属于移动端 Web 应用，用户大多每次访问都会自动刷新，因此暂时不会优先加入。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
new features
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
5 participants
@ilaipi @SublimeCT @CharleeWa @wswmsword @PdxLook