移动端开发-大纲

一、移动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中配置根元素字体大小

二、移动端实战

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