移动web开发与适配

一、移动web开发特点

1.跑在手机端的页面(H5页面)
2.跨平台(IOS和安卓)
3.基于webview(可以看做是一个浏览器)
4.告别IE,拥抱webkit
5.更高的适配和性能要求

二、常见移动web适配方法

PC:
  • 960px/1000px居中
  • 盒子模型,定高,定宽
  • Display:inline-block
移动端:
  • 定高,宽度百分比
  • flex
  • Media Query(媒体查询)

    1
    2
    3
    4
    5
    6
    @media screen and(max-width:320px){
    /*css 适配宽度小于320px的屏幕*/
    }
    @media screen and(min-width:321px){
    /*css 适配宽度大于等于321px的屏幕*/
    }
  • Rem布局

三、Rem原理

  • 值根据html根元素大小而定,也可以作为宽度、高度等单位。
  • 将px换为rem,动态修改font-size适配,1rem默认是16px。可以通过设置html全局的font-size来对rem进行初始化,html的font-size设置为多少px,1rem就等于多少px

    1
    2
    3
    4
    /*设置1rem=24px*/
    html{
    font-size:24px;
    }
  • ios 6 和 android 2.1 以上,基本覆盖所有流行的手机系统。

四、动态修改rem方法

  • 使用媒体查询

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    @media screen and (min-width:361px){
    /*css 适配宽度大于361px的屏幕*/
    html{
    font-size:36px;
    }
    }
    @media screen and (max-width:360px) and (min-width:321px){
    /*css 适配宽度小于360px且大于321px的屏幕*/
    html{
    font-size:24px;
    }
    }
    @media screen and(max-width:321px){
    /*css 适配宽度小于等于321px的屏幕*/
    html{
    font-size:16px;
    }
    }
  • 使用JS动态修改

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    //根据屏幕宽度变化动态设置html的font-size:
    //获取视窗的宽度

    let htmlWidth = document.documentElement.clientWidth || document.body.ClientWidth;

    //获取视窗对象

    let htmlDom = document.getElementsByTagName("html")[0];

    //设置视窗默认的font-size

    htmlDom.style.fontSize = htmlWidth / 10 + "px"

五、rem结合sass使用

让sass自动根据px值转换成相应的rem值

1
2
3
4
5
6
7
8
@function px2rem($px){
$rem:37.5px;
@return ($px/$rem) + rem;
}
.demo{
width:px2rem(75px);
height:px2rem(37.5px);
}

编译结果:

1
2
3
4
.demo{
width:2rem;
heigth:1rem;
}

六、H5移动页面实战

演示地址:H5页面Demo 请用移动端调试
Github项目地址:移动适配

H5页面Demo

可以直接下载zip,或者git clone下来,最好再点个Star或者Fork支持一下~

打包编译:

1
2
npm install #下载依赖包
webpack #编译

参考:

移动web开发适配秘籍Rem
移动端H5解惑—页面适配
Sass中文文档
webpack中文文档