1 Star 0 Fork 25

touchx / vite-vant3

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

移动端布局方案

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

在线预览

http://buqiyuan.gitee.io/vite-vant3

提供三个布局方案

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.

简介

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

发行版

暂无发行版

贡献者

全部

近期动态

加载更多
不能加载更多了
TypeScript
1
https://gitee.com/touchx_admin/vite-vant3.git
git@gitee.com:touchx_admin/vite-vant3.git
touchx_admin
vite-vant3
vite-vant3
main

搜索帮助

14c37bed 8189591 565d56ea 8189591