移动WEB开发

了解移动端基础

浏览器
移动端的浏览器大多都是基于webkit修改的内核，国内尚无自主研发的内核。所以，兼容移动端主流浏览器，处理webkit内核浏览器即可。

手机屏幕现状
移动端设备屏幕尺寸非常多，碎片化严重。
Android设备有多种分辨率：400 * 800，480 * 854，540 * 960，720 * 1290，1080 * 1920等。
近年来iPhone的碎片化也加剧了，640 * 960，640 * 1136，750 * 1334，1242 * 2208等。

移动端调试方法

• Chrome DevTools的模拟手机调试。
• 搭建本地web服务器，通过手机访问。
• 使用外网服务器，直接ip或域名访问。

视口

视口(viewport)就是浏览器显示页面内容的屏幕区域。视口可以分为布局视口、视觉视口和理想视口。

布局视口 layout viewport

• 一般移动设备的浏览器都默认设置来一个布局视口，用于解决早期的PC端页面在手机上的显示问题。
• IOS，Android 基本都将这个视口分辨率设置为980px，所以PC上的网页大多都能在手机上呈现，只不过元素看上去很小，一般默认可以通过手动缩放页面。

视觉视口 visual viewport

• 字面意思，它是用户正在看到的网站的区域。 注意：是网站的区域。
• 我们可以通过缩放去操作视觉视口，但不会影响布局视口，布局视口仍保持原来的宽度。

理想视口 ideal viewport

• 为了使网站在移动端有最理想的浏览和阅读宽度而设定
• 理想视口，对设备来讲，是最理想的视口尺寸
• 需要填写meta视口标签通知浏览器操作
• meta视口标签的主要目的：布局视口的宽度应该与理想视口的宽度一致，简单理解- 就是设备有多宽，我们布局的视口就多宽。

<meta>视口标签

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

视口标签.png

二倍图

物理像素和物理像素比

• 物理像素点指的是屏幕显示的最小颗粒，是物理真实存在的。这是厂商在出厂时就设置好了。
• 我们开发时候的1px不是一定等于1个物理像素的。
• PC端页面，1个px等于1个物理像素的，但是移动端就不尽相同。

• 一个px的能显示的物理像素点的个数，称为物理像素比或屏幕像素比。

  
  物理像素比.png

多倍图

• 对于一张50 * 50 的图片，在手机Retina屏中打开，按照刚才的物理像素比会放大倍数，这样会造成图片模糊。
• 在标准的viewport设置中，使用倍图来提高图片质量，解决在高清设备中的模糊问题。
• 通常使用二倍图，因为iPhone 6/7/8的影响，但是现在还存在3倍图4倍图的情况，这个看实际开发公司需求。
• 背景图片注意缩放问题。

移动端开发选择

• 单独制作移动端页面(主流)
• 响应式页面兼容移动端(其次)

移动端常见问题解决方案

移动端浏览器主要以webkit为主，因此我们只需要考虑webkit兼容性问题。
我们可以放心使用H5和CSS样式。
同时我们浏览器的私有前缀我们只需要考虑添加-webkit-即可。

移动端CSS初始化推荐使用normalize.css
官网：https://necolas.github.io/normalize.css/

特殊样式.png

移动端技术选型

单独制作移动端页面（主流）

• 流式布局（百分比布局）
• flex弹性布局（强烈推荐）
• less + rem +媒体查询布局
• 混合布局

响应式页面兼容移动端（其次）

• 媒体选择
• bootstrap

流式布局（百分比布局）

• 流式布局，就是百分比布局，也称非固定像素布局
• 通过将盒子的宽度设置成百分比，从而根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充
• 流式布局方式是移动web开发使用的比较常见的布局方式

注意
制作过程中，需要定义页面的最大和最小支持宽度

• max-width最大宽度 （max-height最大高度）
• min-width最小宽度（min-height最小高度）

flex布局

• 操作方便，布局极为简单，移动端应用很广泛
• PC 端浏览器支持情况较差
• IE 11或更低版本，不支持或仅部分支持

原理：通过给父盒子添加flex属性，来控制子盒子的位置和排列方式

flex布局父项常见属性

• flex-direction: 设置主轴方向
• justify-content: 设置主轴上的子元素排列方式
• flex-wrap: 设置子元素是否换行
• align-content: 设置侧轴上的子元素的排列方式（多行）
• align-items: 设置侧轴上的子元素排列方式（单行）
• flex-flow: 复合属性，相当于同时设置了 flex-direction 和flex-wrap

rem

• rem -- root em是一个相对单位，类似于em，em是父元素字体大小。
• 不同的是rem的基准是相对于html标签元素的字体大小
• 比如，根元素html设置font-size=12px；非根元素设置width：2rem；转化成px就是24px
• rem的优势：父元素文字大小可能不一致，但是整个页面只有一个html，可以很好的来控制整个页面的元素大小比例。

媒体查询

• 用@media开头 注意@符号
• mediatype媒体类型
• 关键字 and not only
• media feature 媒体特性 必须有小括号包含

@media mediatype and|not|only (media feature){
            css-code;
        }

max-width min-width都包含等于

less
css弊端

• css需要书写大量看似没有逻辑的代码，css冗余度是比较高的
• 不方便维护及扩展，不利于复用
• css没有很好的计算能力
• 非前端开发工程师来讲，往往会因为缺少css编写经验而很难写出组织良好且易于维护的css代码项目

less简介和安装

• Less Leaner Style Sheets 是一门 CSS扩展语言，也成为CSS预处理器。
• 做为CSS的一种形式的扩展，它并没有减少CSS的功能，而是在现有的CSS语法上，为CSS加入程序式语言的特性
• 它在CSS的语法基础上，引入来变量，Mixin（混入），运算以及函数等功能，大大简化来CSS的编写，并且降低了CSS的维护成本，就像它的名称

Less是一门CSS预处理语言，它扩展了CSS的动态特性。

安装

npm install -g less

Less变量规则

• 必须以@开头
• 不能包含特殊符号
• 数字不能开头
• 大小写敏感

Less运算

• 参与运算的数字，可以一个有单位一个没有，最终单位就是唯一那个单位
• 参与运算的两个数字，两个都有单位取第一个的
• less的运算符左右必须加空格

Less实际开发适配方案1：rem+媒体查询+less技术

响应式页面兼容移动端

• 媒体查询
• Bootstrap

Bootstrap
优点

• 标准化html + css 编码规范
• 提供了一套简洁、直观的组建
• 有生态圈，不断更新迭代
• 让开发更简单，提高效率