feat: px-to-viewport (#55)

donaldshen · levy9527 · commit 97a0aabea657 · 2019-08-07T04:10:39.000-05:00
diff --git a/template/_package.json b/template/_package.json
@@ -57,6 +57,7 @@
     "@commitlint/config-conventional": "^8.0.0",
     <%_ if (template === 'mobile') { _%>
     "babel-plugin-import": "^1.12.0",
+    "postcss-px-to-viewport": "^1.1.1",
     <%_ } else { _%>
     "babel-plugin-component": "^1.1.0",
     <%_ } _%>
diff --git a/template/frameworks/mobile/README.md b/template/frameworks/mobile/README.md
@@ -3,17 +3,18 @@
 
 ## Table of Contents
 
-- **[Feature](#feature)**
-- **[快速开始](#快速开始)**
-- **[工程结构](#工程结构)**
-- **[开发](#开发)**
-  - **[新建页面](#新建页面)**
-  - **[调用接口](#调用接口)**
-  - **[CRUD](#CRUD)**
-  - **[设置代理](#设置代理)**
-- **[环境变量](#环境变量)**
-- **[构建](#构建)**
-- **[License](#license)**
+- [Feature](#feature)
+- [快速开始](#快速开始)
+- [工程结构](#工程结构)
+- [开发](#开发)
+  - [新建页面](#新建页面)
+  - [调用接口](#调用接口)
+  - [CRUD](#crud)
+  - [设置代理](#设置代理)
+  - [样式自适应宽度](#样式自适应宽度)
+- [环境变量](#环境变量)
+- [构建](#构建)
+- [License](#license)
 
 ## Feature
 
@@ -25,6 +26,7 @@
 - css预处理器：[less](http://lesscss.org/)
 - 代码格式化：[prettier](https://github.com/prettier/prettier)
 - 环境变量: [dotenv](https://www.npmjs.com/package/dotenv)
+- 样式自适应屏幕宽度: [px-to-viewport](https://www.npmjs.com/package/postcss-px-to-viewport)
 
 [⬆ Back to Top](#table-of-contents)
 
@@ -227,6 +229,14 @@ env: {
 
 [⬆ Back to Top](#table-of-contents)
 
+### 样式自适应宽度
+
+项目自带了`postcss-px-to-viewport`插件。这样页面在不同宽度的手机📱上使用了`px`的样式会自适应缩放。
+
+模板内的`px`样式默认是按`750px`宽度的设计稿填写。也即：设计稿`10px`，css就是写`10px`。
+
+如果产品设计稿的宽度是`375px`，则修改`postcss.config.js`文件中的`vwUnit`属性为`375`。
+
 ## 环境变量
 
 使用.env设置环境变量, 即在项目根目录新建一个.env文件, 填写环境变量即可。
diff --git a/template/frameworks/mobile/assets/global.less b/template/frameworks/mobile/assets/global.less
@@ -1,5 +1,5 @@
 body {
-  font-size: 14px;
+  font-size: 28px;
 }
 .text-center {
   text-align: center;
@@ -11,21 +11,21 @@ body {
   color: #828282;
 }
 .font-s {
-  font-size: 12px;
+  font-size: 24px;
 }
 
 .font-m {
-  font-size: 14px;
+  font-size: 28px;
 }
 
 .font-l {
-  font-size: 16px;
+  font-size: 32px;
 }
 
 .font-xl {
-  font-size: 18px;
+  font-size: 36px;
 }
 .fixed-box { // fixed-btn 用relative的父元素站位
   position: relative;
-  height: 60px;
+  height: 120px;
 }
diff --git a/template/frameworks/mobile/components/agreement.vue b/template/frameworks/mobile/components/agreement.vue
@@ -173,8 +173,8 @@ export default {
 <style lang="less">
 .agreement {
   .content-wrapper {
-    margin-top: 50px;
-    padding: 0 10px;
+    margin-top: 100px;
+    padding: 0 20px;
     height: 100%;
     overflow-y: auto;
   }
diff --git a/template/frameworks/mobile/components/header-nav-bar.vue b/template/frameworks/mobile/components/header-nav-bar.vue
@@ -24,11 +24,11 @@ export default {
 .header-nav-bar {
   position: relative;
   z-index: 100;
-  height: 50px;
+  height: 100px;
 
   .van-nav-bar {
-    height: 50px;
-    line-height: 50px;
+    height: 100px;
+    line-height: 100px;
   }
 
   .van-nav-bar__text:active {
diff --git a/template/frameworks/mobile/pages/cart.vue b/template/frameworks/mobile/pages/cart.vue
@@ -111,16 +111,16 @@ export default {
       .van-checkbox__label {
         width: 100%;
         height: auto;
-        padding: 0 10px 0 15px;
+        padding: 0 20px 0 30px;
         box-sizing: border-box;
       }
 
       .van-checkbox__icon {
         top: 50%;
-        left: 10px;
+        left: 20px;
         z-index: 1;
         position: absolute;
-        margin-top: -10px;
+        margin-top: -20px;
       }
 
       .van-card__price {
@@ -130,7 +130,7 @@ export default {
   }
 
   .van-submit-bar {
-    bottom: 50px;
+    bottom: 100px;
   }
 }
 </style>
diff --git a/template/frameworks/mobile/pages/goods-detail.vue b/template/frameworks/mobile/pages/goods-detail.vue
@@ -105,7 +105,7 @@ export default {
   }
 
   .title {
-    font-size: 16px;
+    font-size: 32px;
   }
 
   .price {
@@ -114,20 +114,20 @@ export default {
 
   .express {
     color: #999;
-    font-size: 12px;
-    padding: 5px 15px;
+    font-size: 24px;
+    padding: 10px 30px;
   }
 
   .cell-group {
-    margin: 15px 0;
+    margin: 30px 0;
 
     .van-cell__value {
       color: #999;
     }
   }
 
   .tag {
-    margin-left: 5px;
+    margin-left: 10px;
   }
 }
 </style>
diff --git a/template/frameworks/mobile/pages/index.vue b/template/frameworks/mobile/pages/index.vue
@@ -94,7 +94,7 @@ export default {
 <style lang="less">
 .index {
   .van-swipe {
-    height: 200px;
+    height: 400px;
 
     .banner {
       max-height: 100%;
@@ -104,14 +104,14 @@ export default {
 
   .goods {
     .van-row {
-      padding: 5px;
+      padding: 10px;
     }
 
     .block {
-      margin: 5px;
-      box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.1);
-      border-radius: 5px;
-      font-size: 14px;
+      margin: 10px;
+      box-shadow: 0 0 4px 2px rgba(0, 0, 0, 0.1);
+      border-radius: 10px;
+      font-size: 28px;
     }
 
     .price {
@@ -121,7 +121,7 @@ export default {
     .name,
     .price {
       margin: 0;
-      margin-left: 10px;
+      margin-left: 20px;
     }
 
     .good-img {
diff --git a/template/frameworks/mobile/pages/my.vue b/template/frameworks/mobile/pages/my.vue
@@ -97,33 +97,33 @@ export default {
   }
 
   &-group {
-    margin-bottom: 15px;
+    margin-bottom: 30px;
   }
 
   &-links {
-    padding: 15px 0;
-    font-size: 12px;
+    padding: 30px 0;
+    font-size: 24px;
     text-align: center;
     background-color: #fff;
 
     .van-icon {
       display: block;
-      font-size: 24px;
+      font-size: 48px;
     }
   }
 
   .login {
-    padding: 10px;
+    padding: 20px;
 
     .title {
-      margin-bottom: 20px;
+      margin-bottom: 40px;
     }
   }
 
   .login-btn {
     width: 100%;
     background: #6495fe;
-    border: 1px solid #6495fe;
+    border: 2px solid #6495fe;
   }
 }
 </style>
diff --git a/template/frameworks/mobile/pages/order-list.vue b/template/frameworks/mobile/pages/order-list.vue
@@ -31,14 +31,14 @@ export default {
 .order-list {
   .order {
     display: flex;
-    height: 50px;
-    line-height: 50px;
-    margin: 0 10px;
+    height: 100px;
+    line-height: 100px;
+    margin: 0 20px;
     justify-content: space-between;
 
     img {
-      height: 40px;
-      margin-right: 10px;
+      height: 80px;
+      margin-right: 20px;
     }
   }
 }
diff --git a/template/frameworks/mobile/postcss.config.js b/template/frameworks/mobile/postcss.config.js
@@ -0,0 +1,36 @@
+/**
+ * nuxt3 将不支持 postcss.config.js。详情参考 yarn dev 时的 WARN 信息
+ */
+module.exports = ({file}) => {
+  // 设计稿宽度
+  let vwUnit = 750
+  /**
+   * 使vant组件代码自适应viewport。引入其他第三方样式库时可参考此方式处理
+   * @see https://github.com/youzan/vant/issues/1181
+   */
+  if (file && file.dirname && /node_modules\/vant/.test(file.dirname)) {
+    vwUnit = 375
+  }
+  return {
+    plugins: [
+      // 默认小于等于1px的值不会被转换。建议使用vant提供的hairline样式
+      require('postcss-px-to-viewport')({
+        viewportWidth: vwUnit
+        // exclude: /node_modules\/vant/ // 如果不想转换vant等第三方组件，则开启exclude选项
+        // selectorBlackList: ['van-'] // 这样子也可以不转换vant组件样式，但项目内覆盖vant样式的代码也不会被转换
+      }),
+      /**
+       * nuxt 默认配置
+       * @see https://nuxtjs.org/api/configuration-build/#postcss
+       */
+      require('postcss-import'),
+      require('postcss-url'),
+      /**
+       * 如果要使用 browserslist，推荐写在 package.json 里而不是 autoprefixer 里
+       * @see https://github.com/postcss/autoprefixer#options
+       */
+      require('postcss-preset-env')({stage: 2, autoprefixer: {}}),
+      require('cssnano')({ preset: 'default' }) // disabled in dev mode
+    ]
+  }
+}

Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,5 @@`
`1`	`1`	`body {`
`2`		`- font-size: 14px;`
	`2`	`+ font-size: 28px;`
`3`	`3`	`}`
`4`	`4`	`.text-center {`
`5`	`5`	`text-align: center;`
`@@ -11,21 +11,21 @@ body {`
`11`	`11`	`color: #828282;`
`12`	`12`	`}`
`13`	`13`	`.font-s {`
`14`		`- font-size: 12px;`
	`14`	`+ font-size: 24px;`
`15`	`15`	`}`
`16`	`16`
`17`	`17`	`.font-m {`
`18`		`- font-size: 14px;`
	`18`	`+ font-size: 28px;`
`19`	`19`	`}`
`20`	`20`
`21`	`21`	`.font-l {`
`22`		`- font-size: 16px;`
	`22`	`+ font-size: 32px;`
`23`	`23`	`}`
`24`	`24`
`25`	`25`	`.font-xl {`
`26`		`- font-size: 18px;`
	`26`	`+ font-size: 36px;`
`27`	`27`	`}`
`28`	`28`	`.fixed-box { // fixed-btn 用relative的父元素站位`
`29`	`29`	`position: relative;`
`30`		`- height: 60px;`
	`30`	`+ height: 120px;`
`31`	`31`	`}`
Original file line number	Diff line number	Diff line change
`@@ -111,16 +111,16 @@ export default {`
`111`	`111`	`.van-checkbox__label {`
`112`	`112`	`width: 100%;`
`113`	`113`	`height: auto;`
`114`		`- padding: 0 10px 0 15px;`
	`114`	`+ padding: 0 20px 0 30px;`
`115`	`115`	`box-sizing: border-box;`
`116`	`116`	`}`
`117`	`117`
`118`	`118`	`.van-checkbox__icon {`
`119`	`119`	`top: 50%;`
`120`		`- left: 10px;`
	`120`	`+ left: 20px;`
`121`	`121`	`z-index: 1;`
`122`	`122`	`position: absolute;`
`123`		`- margin-top: -10px;`
	`123`	`+ margin-top: -20px;`
`124`	`124`	`}`
`125`	`125`
`126`	`126`	`.van-card__price {`
`@@ -130,7 +130,7 @@ export default {`
`130`	`130`	`}`
`131`	`131`
`132`	`132`	`.van-submit-bar {`
`133`		`- bottom: 50px;`
	`133`	`+ bottom: 100px;`
`134`	`134`	`}`
`135`	`135`	`}`
`136`	`136`	`</style>`
Original file line number	Diff line number	Diff line change
`@@ -105,7 +105,7 @@ export default {`
`105`	`105`	`}`
`106`	`106`
`107`	`107`	`.title {`
`108`		`- font-size: 16px;`
	`108`	`+ font-size: 32px;`
`109`	`109`	`}`
`110`	`110`
`111`	`111`	`.price {`
`@@ -114,20 +114,20 @@ export default {`
`114`	`114`
`115`	`115`	`.express {`
`116`	`116`	`color: #999;`
`117`		`- font-size: 12px;`
`118`		`- padding: 5px 15px;`
	`117`	`+ font-size: 24px;`
	`118`	`+ padding: 10px 30px;`
`119`	`119`	`}`
`120`	`120`
`121`	`121`	`.cell-group {`
`122`		`- margin: 15px 0;`
	`122`	`+ margin: 30px 0;`
`123`	`123`
`124`	`124`	`.van-cell__value {`
`125`	`125`	`color: #999;`
`126`	`126`	`}`
`127`	`127`	`}`
`128`	`128`
`129`	`129`	`.tag {`
`130`		`- margin-left: 5px;`
	`130`	`+ margin-left: 10px;`
`131`	`131`	`}`
`132`	`132`	`}`
`133`	`133`	`</style>`
Original file line number	Diff line number	Diff line change
`@@ -97,33 +97,33 @@ export default {`
`97`	`97`	`}`
`98`	`98`
`99`	`99`	`&-group {`
`100`		`- margin-bottom: 15px;`
	`100`	`+ margin-bottom: 30px;`
`101`	`101`	`}`
`102`	`102`
`103`	`103`	`&-links {`
`104`		`- padding: 15px 0;`
`105`		`- font-size: 12px;`
	`104`	`+ padding: 30px 0;`
	`105`	`+ font-size: 24px;`
`106`	`106`	`text-align: center;`
`107`	`107`	`background-color: #fff;`
`108`	`108`
`109`	`109`	`.van-icon {`
`110`	`110`	`display: block;`
`111`		`- font-size: 24px;`
	`111`	`+ font-size: 48px;`
`112`	`112`	`}`
`113`	`113`	`}`
`114`	`114`
`115`	`115`	`.login {`
`116`		`- padding: 10px;`
	`116`	`+ padding: 20px;`
`117`	`117`
`118`	`118`	`.title {`
`119`		`- margin-bottom: 20px;`
	`119`	`+ margin-bottom: 40px;`
`120`	`120`	`}`
`121`	`121`	`}`
`122`	`122`
`123`	`123`	`.login-btn {`
`124`	`124`	`width: 100%;`
`125`	`125`	`background: #6495fe;`
`126`		`- border: 1px solid #6495fe;`
	`126`	`+ border: 2px solid #6495fe;`
`127`	`127`	`}`
`128`	`128`	`}`
`129`	`129`	`</style>`
Original file line number	Diff line number	Diff line change
`@@ -31,14 +31,14 @@ export default {`
`31`	`31`	`.order-list {`
`32`	`32`	`.order {`
`33`	`33`	`display: flex;`
`34`		`- height: 50px;`
`35`		`- line-height: 50px;`
`36`		`- margin: 0 10px;`
	`34`	`+ height: 100px;`
	`35`	`+ line-height: 100px;`
	`36`	`+ margin: 0 20px;`
`37`	`37`	`justify-content: space-between;`
`38`	`38`
`39`	`39`	`img {`
`40`		`- height: 40px;`
`41`		`- margin-right: 10px;`
	`40`	`+ height: 80px;`
	`41`	`+ margin-right: 20px;`
`42`	`42`	`}`
`43`	`43`	`}`
`44`	`44`	`}`