1 Star 1 Fork 25

TaiYiVueSource / vite-vue3-h5

forked from buqiyuan / vite-vue3-h5 
加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
克隆/下载
贡献代码
同步代码
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
README
MIT

移动端布局方案

移动端 vant3.x + vue3.x + vite2.x + ts.4.x + REM 布局 + Viewport (VW) 布局的实例运用

在线预览

http://buqiyuan.gitee.io/vite-vue3-h5

提供三个布局方案

1. REM 布局

使用 js 动态设置 html 的 font-size,css 使用 rem 单位,文本大小可选择使用 px

js 设置 viewport 的 scale 以支持高清设备的 1px

可设置页面最大最小宽度

2. VW 布局

css 使用 vw 单位,文本大小可选择使用 px

使用 transform 以支持高清设备的边框 1px(包括圆角),使用 @mixin ./vw/scss/_border.scss

可设置容器固定纵横比,不可设置页面最大最小宽度

3. REM + VW 布局

html 的 font-size 使用 vw 单位,css 使用 rem 单位,文本大小可选择使用 px

使用 transform 以支持高清设备的边框 1px(包括圆角),使用 @mixin ./vw-rem/scss/_border.scss

可设置容器固定纵横比,可设置页面最大最小宽度

使用

  1. yarn dev

  2. 业务代码中样式的调用方式可参考 ./rem/scss/rem.scss./vw/scss/vw.scss./vw-rem/scss/vw-rem.scss 三个文件;可在 html 文件相应位置配置 data-content-max 属性来限制容器最大最小宽

MIT License Copyright (c) 2021 bqy Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

简介

vue3.x + vite2.x + vant3.x + ts 移动端 vw + rem布局基础模板 展开 收起
TypeScript
MIT
取消

发行版

暂无发行版

贡献者

全部

近期动态

加载更多
不能加载更多了
TypeScript
1
https://gitee.com/tai-yi-vue-source/vite-vue3-h5.git
git@gitee.com:tai-yi-vue-source/vite-vue3-h5.git
tai-yi-vue-source
vite-vue3-h5
vite-vue3-h5
main

搜索帮助