移動端開發單位——rem，動態使用

移動端開發-大綱

---

1、移動web開發和適配

一、特色：

跑在手機端的web頁面（H5頁面）、 跨平臺、基於webview、告別IE擁抱webkit、更高的適配和性能要求

小技巧：在調試窗口中，選中「computed -> Show all」,就會顯示標籤元素的所有樣式。

二、常見的移動web適配方法：

• 定高，寬度百分比
• flex佈局 <響應式佈局>
• Media Query(媒體查詢) <響應式佈局>

(1)、Media Query（媒體查詢）

@media 媒體類型 and (媒體特性){
        /*css樣式*/
    }   

    //媒體類型：screen , print....
    //媒體特性：max-width , max-height....

（2）、js配置跟頁面字體大小

//在index.html中配置根元素字體大小
<script>
     //獲取視窗寬度：兼容不一樣移動端設備獲取設備寬度
    let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;
    //獲取視窗根元素
    let htmlDom = document.getElementsByTagName("html")[0];
    //設置根元素字體大小
    htmlDom.style.fontSize = htmlWidth / 10 + "px";
</script>

2、移動端實戰

一、經過sass語法中function函數自動將px轉爲rem

//a.scss文件
//以iPhone6屏幕尺寸爲例，轉化獲得的1rem = 37.5px;
@function rem2px($px) {
  $rem: 37.5px;
  @return ($px / $rem) + rem;
}
.a {
  font-size: rem2px(37.5px);
}

//轉化爲a.css文件以下：
.a {
  font-size: 1rem; 
  }

前提：安裝node-sass來編譯scss文件爲css文件。

二、實戰DEMO【移動端使用此方法便可】

（1）、生成項目

npm init

項目結構：

（2）、根據package.json文件，安裝以下包：

（3）、根目錄下增長webpack.conf.js文件：

var webpack = require("webpack");
var path = require("path");
module.exports = {
  entry: "./app.js",
  output: {
    path: path.resolve(__dirname, "./build"),
    filename: "bundle.js"
  },
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: ["style-loader", "css-loader", "sass-loader"]
      },
      {
        test: /\.(png|jpg)$/,
        use: [
          {
            loader: "url-loader",
            options: {
              limit: 1024
            }
          }
        ]
      }
    ]
  }
};

（4）、根目錄下增長app.js

require("./index.scss");
//動態配置根元素的font-size數值
let htmlWidth =
  document.documentElement.clientWidth || document.body.clientWidth;
let htmlDom = document.getElementsByTagName("html")[0];
htmlDom.style.fontSize = htmlWidth / 10 + "px";
console.log(htmlDom.style.fontSize);

（5）、index.scss文件中修改樣式

//使用sass的function函數自動轉換px爲rem
//`這裏以iPhone6的UI尺寸配置`
@function px2rem($px) {
  $rem: 37.5px;
  @return ($px / $rem) + rem;
}

.header {
  //根據UI圖將標識高度值直接傳入參數便可
  height: px2rem(40px);   
  }

注意：通常設計師給咱們的UI圖中的標識高度是放大一倍的值，因此須要使用 「 height: px2rem(80px/2)」，將高度值除以2在傳入參數中。