web前端开发之 -移动端屏幕的适配总结

前言

在前端开发中，适配移动端我们主要有以下几种方式：

• 流式布局：百分比布局实现在移动端的宽高自适应
• 响应式布局：css3中媒体查询
• REM(弹性)布局：实现盒子的宽高自适应

最标准的viewport设置

• 视口宽度和设备保持一致
• 视口的默认缩放比例1.0
• 不允许用户自行缩放
• 最大允许的缩放比例1.0
• 最小允许的缩放比例1.0

<meta name="viewport" content="width=device-width, user-scalable=no,initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

技术方案

移动端浏览器兼容问题

• 移动端浏览器基本以 webkit 内核为主，因此我们就考虑webkit兼容性问题。

• 我们可以放心使用 H5 标签和 CSS3 样式。

• 同时我们浏览器的私有前缀我们只需要考虑添加 webkit 即可

移动端公共样式

移动端 CSS 初始化推荐使用 normalize.css/

• Normalize.css：保护了有价值的默认值

• Normalize.css：修复了浏览器的bug

• Normalize.css：是模块化的

• Normalize.css：拥有详细的文档

• 官网地址： http://necolas.github.io/normalize.css/
  常用初始化样式

body {
 	 max-width: 540px;
 	 min-width: 320px;
	/*CSS3盒子模型*/
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
  	margin: 0 auto;
 	 font: normal 14px/1.5 Tahoma,"Lucida Grande",Verdana,"Microsoft Yahei",STXihei,hei;
 	 color: #000;
  	background: #f2f2f2;
  	overflow-x: hidden;
  	/*点击高亮我们需要清除清除  设置为transparent 完成透明*/
	-webkit-tap-highlight-color: transparent;
	/*在移动端浏览器默认的外观在iOS上加上这个属性才能给按钮和输入框自定义样式*/
	-webkit-appearance: none;
	/*禁用长按页面时的弹出菜单*/
	img,a { -webkit-touch-callout: none; }
}

流式布局

流式布局在css2时代就有，主要是靠百分比进行排版.
流式布局：网页中主要的划分区域的尺寸使用百分数（搭配min-*、max-*属性使用），例如，设置网页主体的宽度为80%，min-width为960px。图片也作类似处理（width:100%, max-width一般设定为图片本身的尺寸，防止被拉伸而失真）。

这种布局方式在Web前端开发的早期历史上，用来应对不同尺寸的PC屏幕（那是屏幕尺寸的差异不会太大），在当今的移动端开发也是常用布局方式，

缺点：宽度使用百分比定义，但是高度和文字大小等大都是用px来固定，所以在大屏幕的手机下显示效果会变成有些页面元素宽度被拉的很长，但是高度、文字大小还是和原来一样（即，这些东西无法变得“流式”），显示非常不协调。

响应式布局

响应式布局的关键技术是CSS3中的媒体查询，监测设备屏幕大小，通过css媒体查询来有针对性的更改页面的布局。
布局特点：每个屏幕分辨率下面会有一个布局样式，即元素位置和大小都会变。
优点：适应pc和移动端，如果足够耐心，效果完美

缺点：（1）媒体查询是有限的，也就是可以枚举出来的，只能适应主流的宽高。（2）要匹配足够多的屏幕大小，工作量不小，设计也需要多个版本。

REM(弹性)布局

rem的定义：font size of the root element，rem是相对于根元素来设置字体大小的，这就意味着，我们只需要根据自己的需求在根元素确定一个参考值。
rem与em、px的区别：
px：像素，比较精确的单位，但不好做响应式布局
em：以父节点font-size大小为参考点，标准不统一，容易造成混乱

对于不同尺寸的屏幕，可以统一假设屏幕宽度为640px后编写CSS（当然你也可以假定统一为320px）。此时，我们设定html元素的font-size为100px（同样，只是举例），然后各处（元素尺寸、文字大小）使用rem作为单位，随后搭配媒体查询或JS，根据屏幕的大小来动态控制html元素的font-size（特定屏幕尺寸下，html元素的font-size应当设置为何值，是使用这个方案时设计师和程序员需要反复考虑后确定的，以下试举一段相关的CSS媒体查询代码），即可自动改变所有用rem定义尺寸的元素的大小（且CSS编写者在脑中进行换算的计算过程比em简单得多）。

其实在移动端使用所谓的弹性布局，是比较勉强的。移动端弹性布局流行起来的原因归根结底是rem单位对于（根据屏幕尺寸）调整页面的各元素的尺寸、文字大小时比较好用。其实，使用vw、vh等后起之秀的单位，可以实现完美的流式布局（高度和文字大小都可以变得“流式”），弹性布局就不再必要了。详细可参考：视区相关单位vw, vh…简介以及可实际应用场景.。

技术方案：

• less+rem+媒体查询
• lflexible.js+rem
• vm + rem

vm适配的基本代码展示:

屏幕宽度 = 100vm;
100vm = 64rem;
1rem = 1.5625vm;

注意：wenkit内核会强制字体大小为12px
所以在屏幕适配时，我们一般设置1rem = 100px
如下设置实在设计稿为640px为基准

html {
	// 设置1rem = 100px
	font-size: 15.625vw;
}
<div style="width: 3.2rem; height:3.2rem">
	在任何手机屏幕上显示都是宽度为50%的正方形
<div>

媒体查询改变rem的值实例代码 ：

 @media screen and (min-width: 640px) {
             html {
                 font-size: 100px;
             }
        }

        @media screen and (max-width: 639px) and (min-width: 480px){
            html {
                font-size: 75px;
            }
        }

        @media screen and (max-width: 479px) and (min-width: 414px){
            html {
                font-size: 64.6875px;
            }
        }

        @media screen and (max-width: 413px) and (min-width: 375px){
            html {
                font-size: 58.59px;
            }
        }

        @media screen and (max-width: 374px) and (min-width: 360px){
            html {
                font-size: 56.25px;
            }
        }

        @media screen and (max-width: 359px){
            html {
                font-size: 50px;
            }
        }

js动态改变rem值实例代码：

// 方式2 - 动态设置rem的值
    
        /**
         * @params designDriftWidth 设计稿的宽度
         */
        function setRem(designDriftWidth) {
            // 1-获取当前屏幕的宽
            var width = window.innerWidth;
            if (width > 640) {
                width = 640;
            }

            if (width < 320) {
                width = 320;
            }
            // 设置屏幕的宽度 当前值 = (当前屏幕宽度/640) * 100;
            document.querySelector('html').style.fontSize = width/designDriftWidth*100 + 'px';
        }
		
		// 基于640的设计稿
        setRem(640);
        window.onresize = function() {
            setRem(640);
        }

结论：

1. 如果只做pc端，那么静态布局（定宽度）是最好的选择；
2. 如果做移动端，且设计对高度和元素间距要求不高，那么弹性布局（rem+js）是最好的选择，一份css+一份js调节font-size搞定；
3. 如果pc，移动要兼容，而且要求很高那么响应式布局还是最好的选择，前提是设计根据不同的高宽做不同的设计，响应式根据媒体查询做不同的布局。

设计稿还原

图片模糊

本地图片 可以i适当大，远程图片根据需求取舍（显示效果和加载速度之间）

1px边款问题

文字类

/* 阅读类文本使用固定像素 */
p {
	font-size:14px;
}
/* 标题类文本使用相对子号 */
.pro_title {
	font-size: 1.2rem;
}
.channel_title {
	font-size:1.8rem;
}

/* 使用em单位设置文字间距 */
.item {
	padding:1.2em;
}

总结：凡是跟布局无关的地方，都不适合使用rem单位，
重点在于还原设计意图

关于性能

页面

图片

图片缓存

数据

框架加载

骨架屏

• 手写dom元素占位，真实数据到达，则换掉（html元素占位）
  占位元素结构不多的情况下使用
• DOM结构结合样式占位（css类占位）

环节焦虑

loading动画 点击动画

app优化

• 网络状态管理，捕获状态给用户提示
• 状态栏管理（沉浸式）
• 引入原生能力（打电话 输入框获取焦点） 找插件，结合原生开发

混合应用框架

基础

• Cordova 前端只能是spa ；插架生态不完善；一般不用于商业级，一般用作信息展示类或者工具类

脚手架

• ionic 基于Cordova 插件生态依赖于Cordova ,基于Aglagure.js，低端机上展示动画显示不足

原生编译

• react native \ Weex \ NativeScript \ Flutter 编译成原生代码 性能体验好

开发平台

• AppCan\ ApiCloud \DCloud

自研框架 ，和原生开发结合。疯转功能到webview