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

移动端开发-大纲


一、移动web开发和适配

1、特点:

跑在手机端的web页面(H5页面)、 跨平台、基于webview、告别IE拥抱webkit、更高的适配和性能要求
小技巧:在调试窗口中,选中“computed -> Show all”,就会显示标签元素的全部样式。

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

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
项目结构:

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

(2)、根据package.json文件,安装如下包:

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

(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在传入参数中。

相关推荐