From 54ab426177c9efe287ecb63c2fa0d2ce8f4a84ef Mon Sep 17 00:00:00 2001 From: sunniejs <13611823420@163.com> Date: Tue, 24 Nov 2020 11:57:14 +0800 Subject: [PATCH] image update --- README.md | 7 +++--- _coverpage.md | 5 ++-- zh-cn/rem.md | 63 ++++++++++++++++++++++----------------------------- 3 files changed, 32 insertions(+), 43 deletions(-) diff --git a/README.md b/README.md index 381a175..0e18da5 100644 --- a/README.md +++ b/README.md @@ -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 -或 [Pull Request ](https://github.com/sunniejs/vue-h5-template/pulls) +使用过程中发现任何问题都可以提[Issue](https://github.com/sunniejs/vue-h5-template/issues) 给我，也非常欢迎 PR 或 [Pull Request ](https://github.com/sunniejs/vue-h5-template/pulls) #### 如何找到失散已久的组织？     扫描下方二维码: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') 关注公众号：回复“加群”即可加 前端仙女群 diff --git a/_coverpage.md b/_coverpage.md index 5ed1db1..a97ee67 100644 --- a/_coverpage.md +++ b/_coverpage.md @@ -4,9 +4,8 @@ 基于 vue-cli4.0+webpack 4+vant ui + sass+ rem 适配方案+axios 封装，构建手机端模板脚手架 -[ GitHub](https://github.com/sunniejs/vue-h5-template) -[马上开始 ](/README) +[ GitHub](https://github.com/sunniejs/vue-h5-template) [马上开始 ](/README) -![](https://imgs.solui.cn/wx/bg.jpg) +![](https://www.sunniejs.cn/static/wx/bg.jpg) diff --git a/zh-cn/rem.md b/zh-cn/rem.md index 606b71f..b6acfd2 100644 --- a/zh-cn/rem.md +++ b/zh-cn/rem.md @@ -4,8 +4,8 @@ Vant 中的样式默认使用`px`作为单位，如果需要使用`rem`单位，推荐使用以下两个工具: -- [postcss-pxtorem](https://github.com/cuth/postcss-pxtorem) 是一款 `postcss` 插件，用于将单位转化为 `rem` -- [lib-flexible](https://github.com/amfe/lib-flexible) 用于设置 `rem` 基准值 +- [postcss-pxtorem](https://github.com/cuth/postcss-pxtorem) 是一款 `postcss` 插件，用于将单位转化为 `rem` +- [lib-flexible](https://github.com/amfe/lib-flexible) 用于设置 `rem` 基准值 ##### PostCSS 配置 @@ -14,33 +14,25 @@ Vant 中的样式默认使用`px`作为单位，如果需要使用`rem`单位， ```javascript // https://github.com/michael-ciniawsky/postcss-load-config module.exports = { - plugins: { - autoprefixer: { - overrideBrowserslist: [ - "Android 4.1", - "iOS 7.1", - "Chrome > 31", - "ff > 31", - "ie >= 8", - ], - }, - "postcss-pxtorem": { - rootValue: 37.5, - propList: ["*"], - }, - }, -}; + plugins: { + autoprefixer: { + overrideBrowserslist: ['Android 4.1', 'iOS 7.1', 'Chrome > 31', 'ff > 31', 'ie >= 8'] + }, + 'postcss-pxtorem': { + rootValue: 37.5, + propList: ['*'] + } + } +} ``` 更多详细信息： [vant](https://youzan.github.io/vant/#/zh-CN/quickstart#jin-jie-yong-fa) **新手必看，老鸟跳过** -很多小伙伴会问我，适配的问题,因为我们使用的是 Vant UI，所以必须根据 Vant UI 375 的设计规范走，一般我们的设计会将 UI 图上 -传到蓝湖，我们就可以需要的尺寸了。下面就大搞普及一下 rem。 +很多小伙伴会问我，适配的问题,因为我们使用的是 Vant UI，所以必须根据 Vant UI 375 的设计规范走，一般我们的设计会将 UI 图上传到蓝湖，我们就可以需要的尺寸了。下面就大搞普及一下 rem。 -我们知道 `1rem` 等于`html` 根元素设定的 `font-size` 的 `px` 值。Vant UI 设置 `rootValue: 37.5`,你可以看到在 iPhone 6 下 -看到 （`1rem 等于 37.5px`）： +我们知道 `1rem` 等于`html` 根元素设定的 `font-size` 的 `px` 值。Vant UI 设置 `rootValue: 37.5`,你可以看到在 iPhone 6 下看到 （`1rem 等于 37.5px`）： ```html @@ -52,27 +44,26 @@ module.exports = { 举个例子：设计给了你一张 750px \* 1334px 图片，在 iPhone6 上铺满屏幕,其他机型适配。 -- 当`rootValue: 70` , 样式 `width: 750px;height: 1334px;` 图片会撑满 iPhone6 屏幕，这个时候切换其他机型，图片也会跟着撑 - 满。 -- 当`rootValue: 37.5` 的时候，样式 `width: 375px;height: 667px;` 图片会撑满 iPhone6 屏幕。 +- 当`rootValue: 70` , 样式 `width: 750px;height: 1334px;` 图片会撑满 iPhone6 屏幕，这个时候切换其他机型，图片也会跟着撑满。 +- 当`rootValue: 37.5` 的时候，样式 `width: 375px;height: 667px;` 图片会撑满 iPhone6 屏幕。 也就是 iphone 6 下 375px 宽度写 CSS。其他的你就可以根据你设计图，去写对应的样式就可以了。 当然，想要撑满屏幕你可以使用 100%，这里只是举例说明。 ```html - + ```