Update 搭建开发环境.md

开发文档/搭建开发环境.md

@@ -1,7 +1,3 @@
-在我的 CSDN 博客中之前已经有过记录了->[跳转到CSDN](https://blog.csdn.net/qq_37205708/article/details/89399182)
-
-这里再简单记录下有哪些准备工作吧.
-
 ## 一: 基于 vue-cli3 搭建项目
 
 1.vue create 项目名
@@ -90,7 +86,7 @@ epubjs 依赖: `cnpm i epubjs --save`
 
 2. 转换成 woff2 格式
 
-3. 创建响应 css 文件使用 @font-face
+3. 创建相应的 css 文件使用 @font-face
 
 4. main.js 导入
 
@@ -103,23 +99,41 @@ epubjs 依赖: `cnpm i epubjs --save`
 
 本项目不允许用户缩放: `maximum-scale=1.0 minimum-scale=1.0 user-scalable=no`
 
-更多移动端配置看这里 https://github.com/AlloyTeam/Mars
+更多移动端配置看这里 https://github.com/RubyLouvre/mobileHack
 
-**rem配置**
+### rem 配置
+考虑到手机类型众多，设备宽高比不尽相同，因此需要采取一种方案来保证在不同设备下的界面效果尽可能一致。目前比较流行的有两种方案，一是 flexible 方案，二是 vh、vw 方案，本项目采用 flexible 方案，即统一使用`rem`布局。
 
 App.vue 中添加如下内容：
 
 ```js
-document.addEventListener('DOMContentLoaded', () => {  // DOM加载完毕后回调
-  const html = document.querySelector('html')          // 取到html根元素
+document.addEventListener('DOMContentLoaded', () => {  // DOM 加载完毕后回调
+  const html = document.querySelector('html')          // 取到 html 根元素
   let fontSize = window.innerWidth / 10                // 800 -> 80 -> 1rem = 80px 总是假定 10 个 rem 就是一个屏幕的宽度
   fontSize = fontSize > 50 ? 50 : fontSize             // 设置一个最大上限，一般都是 50 
   html.style.fontSize = fontSize + 'px'                // 设置根元素默认字体大小
 })
 ```
 rem 就是根元素(html)的 fontSize, 这里假定屏幕宽度为 10 个 rem, 1 rem = 1/10 的屏幕宽度, 另外上限为 50px
 
-这种方式需要刷新才会有变化，如果想要实时变化，可以监听屏幕尺寸变化，代码如下：
+以 iPhone6 为例：布局视口为 375px，则 1rem = 37.5px，这时 UI 给定一个元素的宽为 75px（设备独立像素），我们只需要将它设置为 75 / 37.5 = 2rem。
+
+我们也可以用 scss 写一个函数来帮我们完成这一转换过程：
+```scss
+$ratio: 375 / 10;
+@function px2rem($px) {
+  @return ($px / $ratio) + rem;
+}
+/*
+1、$ratio的值可以由用户随意设定
+2、当设置为37.5时，表示以屏幕宽度375px为基准
+3、如果屏幕宽度大于375px，使用px2rem()方法计算出的值会等比例扩大
+4、如果屏幕宽度小于375px，使用px2rem()方法计算出的值会等比例缩小
+*/
+```
+
+
+针对 PC 端，如果想要实时变化，可以监听屏幕尺寸变化，代码如下：
 
 ``` js
 window.onresize = () => {