Mobile(移动端开发)

移动端开发

移动端是指手机，平板电脑等移动设备，移动端开发是指将网页运行在移动端设备上。

rem+ flex移动端适配

rem相对长度单位，相对于根元素(即html元素)font-size计算值的倍数。rem 移动端屏幕适配是通过计算屏幕尺寸设置根元素字体大小，页面中所用单位统统使用 rem作为单位，这样只要改变根元素字体大小页面中所有元素都会发生改变。flex可以简便、响应式地实现各种页面布局。

为了便于计算 rem 在使用 vscode 编辑器时可以安装 cssrem 插件

cssrem

移动端设置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<head>
    <meta charset="UTF-8">
    <!-- 第一步：视口 width=device-width 初始化比例为1 不缩放 禁止用户缩放  -->
    <!-- viewport-fit=cover" iphoneX 前刘海的适配问题 -->
    <!-- name="format-detection" -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,viewport-fit=cover">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!-- 在苹果手机设备上 会把一些电话号码自动识别 可拨打的手机号，会有链接 设为no 取消 -->
    <meta name="format-detection" content="telephone=no" />
    <!-- yes显示 苹果手机的工具栏和菜单栏 -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <!-- 设置苹果手机设备的状态栏 为黑色 .默认值为default（白色），可以定为black（黑色）和black-translucent（灰色半透明） -->
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
</head>

计算 rem

1
2
3
4
5
6
7
8
9
10
// 先获取 可视区域的宽高 
var iw = document.documentElement.clientWidth;
var iH = document.documentElement.clientHeight;
// 对于小于320px的逻辑像素宽 则 卡住 不缩放啦不适配啦
iw = iw < 320 ? 320 : iw;
//获取 html元素
// cssrem 插件  比如 以ihone4 / 5为基准开发  320逻辑像素宽/20  16px
document.querySelector('html').style.fontSize = iw / 20 + 'px';
// 把 body的高度撑开
document.querySelector('body').style.height = iH + 'px';