移动端开发单位——rem，动态使用

移动端开发-大纲

---

一、移动web开发和适配

1、特点：

跑在手机端的web页面（H5页面）、 跨平台、基于webview、告别IE拥抱webkit、更高的适配和性能要求

小技巧：在调试窗口中，选中“computed -> Show all”,就会显示标签元素的全部样式。

2、常见的移动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>

二、移动端实战

1、通过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文件。

2、实战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在传入参数中。