flexible

cli/build-entry.js

 /*
  * @Author: flyharvest
  * @Date: 2020-07-14 10:15:41
- * @LastEditTime: 2020-07-14 12:11:34
+ * @LastEditTime: 2020-07-14 13:42:10
  * @LastEditors: flyharvest
  */
 const fs = require('fs')
@@ -23,7 +23,7 @@ function access (path) {
   return new Promise((resolve, reject) => {
     fs.access(path, (err) => {
       if (err) {
-        reject(error(`没有找到对应文件 ${path}`))
+        resolve(false)
       } else {
         resolve(true)
       }
@@ -116,6 +116,7 @@ function buildEntry () {
       buildInStep('入口文件构建完成， 开始 rollup 构建')
     })
     .catch(err => {
+      console.log(err)
       const { message = '未知错误' } = err
       buildError(message)
     })

cli/entry.js

@@ -2,7 +2,7 @@
 // this file is auto Write By development scripts
 module.exports = {
   entry: '/Users/liupengfei/work/duiba/@tuia/acitivity-core-real/test/flexible/index.js',
-  libHtml: '/Users/liupengfei/work/duiba/@tuia/acitivity-core-real/test/flexible/index.html',
+  libHtml: '/Users/liupengfei/work/duiba/@tuia/acitivity-core-real/test/public/index.html',
   output: {
     path: '/Users/liupengfei/work/duiba/@tuia/acitivity-core-real/temporary/flexible'
   }

src/flexible/index.js

 /*
  * @Author: flyharvest
  * @Date: 2020-07-14 10:20:49
- * @LastEditTime: 2020-07-14 10:55:15
+ * @LastEditTime: 2020-07-14 13:44:36
  * @LastEditors: flyharvest
  */
-
-import b from '@lib/xhr'
-console.log(b)
+export * from './rem.js'

src/flexible/rem.js

+/*
+ * @Author: flyharvest
+ * @Date: 2020-07-14 10:20:49
+ * @LastEditTime: 2020-07-14 13:34:59
+ * @LastEditors: flyharvest
+ */
+// 缓存根元素字体大小
+let rem
+
+// 设计尺寸
+let designWidth = 750
+// 适配尺寸
+let adaptWidth = 750
+
+// dpr 固定为 2，非真实dpr，因为真实资源都是按照dpr为2导出的
+const dpr = 2
+
+// 放大100倍
+const r = 100
+
+/**
+ * 初始化 rem (设置基准值)
+ */
+export function init (aw = 640, dw = 750) {
+  const el = document.documentElement
+
+  // 避免重复初始化
+  if (rem) {
+    return
+  }
+
+  // 做个缓存
+  adaptWidth = aw
+  designWidth = dw
+
+  // 这个设置没什么意义，看看就行
+  el.setAttribute('data-dpr', dpr)
+
+  function setRem () {
+    const width = el.clientWidth
+
+    // 计算根元素大小
+    const newRem = (width / adaptWidth) * dpr * r
+    // 根元素大小发生改变
+    if (newRem !== rem) {
+      // 缓存
+      rem = newRem
+      // 设置根节点 font-size (基准)
+      el.style.fontSize = `${rem}px`
+    }
+  }
+
+  // pc情况下，让body居中，方便开发
+  function pc (width) {
+    if (!navigator.userAgent.match(/Android|iPhone|iPad|iPod/i) && el.clientWidth > 1024) {
+      setTimeout(() => {
+        document.body.style.margin = '0 auto'
+        document.body.style.maxWidth = `${width}px`
+      }, 0)
+    }
+  }
+
+  // pc情况
+  pc(adaptWidth)
+  // 第一次初始化设置根元素字体大小
+  setRem()
+
+  // 事件监听
+  window.addEventListener('pageshow', setRem, false)
+  window.addEventListener('orientationchange' in window ? 'orientationchange' : 'resize', setRem, false)
+}
+
+/**
+ * px -> rem 转换
+ * @param { number | string} v 如：200 或 '200px'
+ */
+export function px2rem (v) {
+  return parseFloat(v) / ((dpr * r / adaptWidth) * designWidth)
+}
+
+/**
+ * rem -> px 转换
+ * @param { number | string} v 如：5 或 '5rem'
+ */
+export function rem2px (v) {
+  return parseFloat(v) * rem * dpr
+}
+
+/**
+ * 获取根元素字体大小
+ */
+export function getFontSize () {
+  return rem
+}
+
+/**
+ * 获取当前用的dpr
+ */
+export const designDpr = dpr
+
+/**
+ * 获取设计尺寸
+ */
+export function getDesignWidth () {
+  return designWidth
+}
+
+/**
+ * 设置禁止缩放
+ */
+export function setViewPort () {
+  const metas = document.getElementsByTagName('meta')
+  const content = 'width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no'
+  if (metas && metas.length) {
+    for (let i = 0; i < metas.length; i++) {
+      const meta = metas[i]
+      if (meta.name === 'viewport') {
+        meta.content = content
+        return
+      }
+    }
+  }
+
+  const meta = document.createElement('meta')
+  meta.name = 'viewport'
+  meta.content = content
+  document.documentElement.firstElementChild.appendChild(meta)
+}

test/flexible/index.html

-<!--
- * @Author: flyharvest
- * @Date: 2020-07-14 10:21:54
- * @LastEditTime: 2020-07-14 10:22:46
- * @LastEditors: flyharvest
---> 
-<!DOCTYPE html>
-<head>
-  <title>测试页面</title>
-</head>
-<body>
-  <div id="app"></div>
-</body>
\ No newline at end of file

test/flexible/index.js

 /*
  * @Author: flyharvest
  * @Date: 2020-07-14 10:21:58
- * @LastEditTime: 2020-07-14 11:18:04
+ * @LastEditTime: 2020-07-14 13:43:46
  * @LastEditors: flyharvest
  */
-import a from '@lib/xhr'
-console.log(a)
+import * as rem from '@lib/flexible'
+import './index.less'
+
+console.log(rem)
+
+rem.setViewPort()
+
+rem.init(750, 750)
+
+rem.setViewPort()
+rem.init(750, 750)
+
+const body = document.body
+
+for (let i = 0; i < 5; i++) {
+  const div = document.createElement('div')
+  div.classList.add(`test${i}`)
+  div.innerText = (750 - 50 * i) + 'px'
+  body.appendChild(div)
+}
+/**
+ * 获取当前根字体大小
+ */
+console.log('当前根字体大小 ' + rem.getFontSize())
+
+/**
+ * 获取设计尺寸
+ */
+console.log('设计尺寸为 ' + rem.getDesignWidth())
+
+/**
+ * px => rem
+ */
+console.log('750px 对应rem ' + rem.px2rem(750))
+console.log('750px 对应rem ' + rem.px2rem('750px'))
+
+/**
+ * rem => px
+ */
+console.log('3.75rem 对应px ' + rem.rem2px(3.75))
+console.log('3.75rem 对应px ' + rem.rem2px('3.75rem'))

test/flexible/index.less

+@width: 750px;
+
+.test(@width, @bg) {
+  width: @width;
+  height: 200px;
+  font-size: 30px;
+  color: white;
+  background: @bg;
+}
+
+.test0 {
+  .test(750px, blue);
+}
+
+.test1 {
+  .test(700px, red);
+}
+
+.test2 {
+  .test(650px, pink);
+}
+
+.test3 {
+  .test(600px, yellow);
+}
+
+.test4 {
+  .test(550px, green);
+}

test/public/index.html

 <!--
  * @Author: flyharvest
  * @Date: 2020-07-14 10:30:48
- * @LastEditTime: 2020-07-14 10:31:37
+ * @LastEditTime: 2020-07-14 13:33:46
  * @LastEditors: flyharvest
 --> 
 <!DOCTYPE html>
 <head>
   <title>测试页面</title>
+  <style type="text/css">
+    * {
+      padding: 0;
+      margin: 0;
+      font-size: 0;
+    }
+
+    body {
+      width: 100vw;
+      height: 100vh;
+    }
+  </style>
 </head>
 <body>
   <div id="app"></div>