JLNTV_IPD/vue-h5-template
4
0
Fork 0
mirror of https://github.com/sunniejs/vue-h5-template.git synced 2025-05-19 11:09:17 +08:00
Code Issues Projects Releases Wiki Activity

image update

Browse Source
This commit is contained in:
sunniejs 2020-11-24 11:57:14 +08:00
parent 44eae546da
commit 54ab426177
3 changed files with 32 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
README.md
View File

@ -4,7 +4,7 @@
#### 预览 #### 预览
[查看 demo](https://solui.cn/vue-h5-template/#/) 建议手机端查看 [查看 demo](https://sunniejs.cn/vue-h5-template/#/) 建议手机端查看
手机扫码查看 手机扫码查看
@ -22,12 +22,11 @@
#### 贡献代码 #### 贡献代码
使用过程中发现任何问题都可以提[Issue](https://github.com/sunniejs/vue-h5-template/issues) 给我，也非常欢迎 PR 使用过程中发现任何问题都可以提[Issue](https://github.com/sunniejs/vue-h5-template/issues) 给我，也非常欢迎 PR 或 [Pull Request ](https://github.com/sunniejs/vue-h5-template/pulls)
或 [Pull Request ](https://github.com/sunniejs/vue-h5-template/pulls)
#### 如何找到失散已久的组织？ #### 如何找到失散已久的组织？
    扫描下方二维码:point_down::point_down:关注“前端女塾”     扫描下方二维码:point_down::point_down:关注“前端女塾”
![logo](https://imgs.solui.cn/wx/640.gif ':size=262x224') ![logo](https://www.sunniejs.cn/static/wx/640.gif ':size=262x224')
关注公众号：回复“加群”即可加 前端仙女群 关注公众号：回复“加群”即可加 前端仙女群

5
_coverpage.md
View File

@ -4,9 +4,8 @@
基于 vue-cli4.0+webpack 4+vant ui + sass+ rem 适配方案+axios 封装，构建手机端模板脚手架 基于 vue-cli4.0+webpack 4+vant ui + sass+ rem 适配方案+axios 封装，构建手机端模板脚手架
[<i class="iconfont icon-github"></i> GitHub](https://github.com/sunniejs/vue-h5-template) [<i class="iconfont icon-github"></i> GitHub](https://github.com/sunniejs/vue-h5-template) [马上开始 <i class="iconfont icon-down"></i>](/README)
[马上开始 <i class="iconfont icon-down"></i>](/README)
<!-- background image --> <!-- background image -->
![](https://imgs.solui.cn/wx/bg.jpg) ![](https://www.sunniejs.cn/static/wx/bg.jpg)

29
zh-cn/rem.md
View File

@ -16,31 +16,23 @@ Vant 中的样式默认使用`px`作为单位，如果需要使用`rem`单位，
module.exports = { module.exports = {
plugins: { plugins: {
autoprefixer: { autoprefixer: {
overrideBrowserslist: [ overrideBrowserslist: ['Android 4.1', 'iOS 7.1', 'Chrome > 31', 'ff > 31', 'ie >= 8']
"Android 4.1",
"iOS 7.1",
"Chrome > 31",
"ff > 31",
"ie >= 8",
],
}, },
"postcss-pxtorem": { 'postcss-pxtorem': {
rootValue: 37.5, rootValue: 37.5,
propList: ["*"], propList: ['*']
}, }
}, }
}; }
``` ```
更多详细信息： [vant](https://youzan.github.io/vant/#/zh-CN/quickstart#jin-jie-yong-fa) 更多详细信息： [vant](https://youzan.github.io/vant/#/zh-CN/quickstart#jin-jie-yong-fa)
**新手必看，老鸟跳过** **新手必看，老鸟跳过**
很多小伙伴会问我，适配的问题,因为我们使用的是 Vant UI，所以必须根据 Vant UI 375 的设计规范走，一般我们的设计会将 UI 图上 很多小伙伴会问我，适配的问题,因为我们使用的是 Vant UI，所以必须根据 Vant UI 375 的设计规范走，一般我们的设计会将 UI 图上传到蓝湖，我们就可以需要的尺寸了。下面就大搞普及一下 rem。
传到蓝湖，我们就可以需要的尺寸了。下面就大搞普及一下 rem。
我们知道 `1rem` 等于`html` 根元素设定的 `font-size` 的 `px` 值。Vant UI 设置 `rootValue: 37.5`,你可以看到在 iPhone 6 下 我们知道 `1rem` 等于`html` 根元素设定的 `font-size` 的 `px` 值。Vant UI 设置 `rootValue: 37.5`,你可以看到在 iPhone 6 下看到 （`1rem 等于 37.5px`）：
看到 （`1rem 等于 37.5px`）：
```html ```html
<html data-dpr="1" style="font-size: 37.5px;"></html> <html data-dpr="1" style="font-size: 37.5px;"></html>
@ -52,8 +44,7 @@ module.exports = {
举个例子：设计给了你一张 750px \* 1334px 图片，在 iPhone6 上铺满屏幕,其他机型适配。 举个例子：设计给了你一张 750px \* 1334px 图片，在 iPhone6 上铺满屏幕,其他机型适配。
- 当`rootValue: 70` , 样式 `width: 750px;height: 1334px;` 图片会撑满 iPhone6 屏幕，这个时候切换其他机型，图片也会跟着撑 - 当`rootValue: 70` , 样式 `width: 750px;height: 1334px;` 图片会撑满 iPhone6 屏幕，这个时候切换其他机型，图片也会跟着撑满。
满。
- 当`rootValue: 37.5` 的时候，样式 `width: 375px;height: 667px;` 图片会撑满 iPhone6 屏幕。 - 当`rootValue: 37.5` 的时候，样式 `width: 375px;height: 667px;` 图片会撑满 iPhone6 屏幕。
也就是 iphone 6 下 375px 宽度写 CSS。其他的你就可以根据你设计图，去写对应的样式就可以了。 也就是 iphone 6 下 375px 宽度写 CSS。其他的你就可以根据你设计图，去写对应的样式就可以了。
@ -61,7 +52,7 @@ module.exports = {
当然，想要撑满屏幕你可以使用 100%，这里只是举例说明。 当然，想要撑满屏幕你可以使用 100%，这里只是举例说明。
```html ```html
<img class="image" src="https://imgs.solui.cn/weapp/logo.png" /> <img class="image" src="https://www.sunniejs.cn/static/weapp/logo.png" />
<style> <style>
/* rootValue: 75 */ /* rootValue: 75 */