移动端基础

什么是移动Web?

就是运行在移动设备商的产品.包括手机/平板等其他手持触摸设备,现在运行的主要有安卓/IOS

产品分类

1.app手机应用

2.H5

app与H5的优劣势

app

优势

功能完善、体验好、可以离线使用

劣势

开发成本高、迭代不可控、内容限制

H5

优势

跨平台、开发成本低、更容易迭代

劣势

功能有限、操作体验欠佳、无法离线使用

H5运行环境的分类

移动端浏览器

原生APP的webview中（hyBrid混合开发模式）,开发的H5页面嵌入到app的webview中显示

为什么会出现这种模式?很好的发挥两者的优势，规避两者的弱势,涉及到操作系统级别的选择用 app 来做，需要及时更新的就选择 H5做 ，分工明确.

现在市面上pc和移动共用一套的有:华为/猎豹. 不是一套的可以查看:京东/淘宝.

移动端浏览器及内核分析

PC端浏览器

chrome、safari、firefox、IE

移动端浏览器类型

内置浏览器(微信)、可下载浏览器(IE 火狐)、代理浏览器、webview

内核

Gecko内核,css前缀为"-moz-",代表 firefox

WebKit内核,css前缀为"-webkit-"，代表 chrome、苹果、微信等

Presto内核,css前缀为"-o-",代表Opera(欧朋)

Trident内核,css前缀为"-ms-",代表IE

移动端开发测试浏览器

使用Chrome浏览器作为移动开发测试浏览器的原因

很多的手机浏览器都用Webkit作为渲染引擎

Chrome浏览器移动测试

理想视口

一个手机或平板浏览器的布局宽度是在980px或1024px。虽然这能让桌面网站不被压扁，但是这并不理想，尤其对手机用户，因为在狭窄的屏幕上更适合一个狭窄的网站

真正适合手机的视口是什么呢？

<meta name="viewport" content="width=device-width, initial-scale=1.0 "/>

                          理想视口                    宽度等于设备宽度     初始化缩小.1.0代表不缩小,值越大显示越大,PC端不变

设置布局视口的宽度为特定的值

<meta name="viewport" content="width=device-width, user-scalable=no(手机端不放大), initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>

width=device-width  设置布局视口的宽度为特定的值

width=device-width  设置布局视口的宽度为特定的值

initial-scale=1.0  设置页面的初始缩放程度

maximum-scale=1.0 设置最大的缩放程度（用户可放大的程度）

minimum-scale=1.0 设置最小的缩放程度（用户可放小的程度）

user-scalable=no(是否组织用户缩放)

移动网页开发

移动网页开发和PC网页开发有什么异同？

不同点

适配不同的分辨率和屏幕尺寸

兼容的浏览器

相同点

布局结构

使用的技术

使用相对长度单位em布局网页内容

em是描述相对于当前对象内文本的字体尺寸，它是相对长度单位。

em的值并不是固定的,em会继承父级元素的字体大小（相对父级的字体大小而发生变化）

PX和em在线转换的网站： http://pxtoem.com

使用相对长度单位rem布局网页内容

em是CSS3新增的一个相对单位（root em，根em）

rem与em的区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素

相对单位rem

rem的值并不是固定的,rem是相对根节点html发生变化的（和父节点无关）,实际开发中一般默认的把html根节点设置为10px（62.5%）或者是100px，方便后续计算

em、rem使用场景

em:通常不使用 em 单位控制字体大小,首行缩进: text-indent:2em;

rem:一切可扩展都应该使用 rem 单位,响应式网站可以使用rem去做适配

不要使用 em 或 rem:多列布局,当元素应该是严格不可缩放的时候