1/ 开发自适应/响应式页面
2/ 开发移动web页面
3/ 开发移动端的特效
4/ 掌握移动端开发技巧以及优化
移动端基础：
了解移动端产品分类及现状
会调试移动端项目
会使用viewport视口标签定义理想窗口
会使用em布局网页
会使用rem布局网页
什么是移动web
移动web
运行在移动设备上的产品
移动设备包括： 手机/平板/其他的一些手持触摸设备等
适配平台 ：
安卓
ios
产品分类
app(手机应用)
现在流行的app大部分都是原生app开发者开发
安卓开发工程师
ios开发工程师
使用javascript来开发原生的app
phone Gap/ React native /。。。。
H5
就是HTML页面，基本都是运行在浏览器中
PC浏览器：chrome/ safari / 火狐
移动端浏览器
app 与 H5 的优劣势
app
优势
功能完善/体验好/可以离线使用
劣势
开发成本高/迭代不可控/内容限制
H5
优势
跨平台/开发成本低/更容易迭代
劣势
功能有限/操作体验欠佳/无法离线使用
H5 运行环境的分类
移动端浏览器
原生APP的webview 中（hyBrid模式）
1/开发的H5页面嵌入到app的webview中显示
2/为什么会出现这种模式
很好的发挥两者的优势，规避两者的弱势
涉及到操作系统级别的选择用app来做，需要及时更新的就选择H5，分工明确
这种模式，可能就是以后工作中最常用到的
移动端产品形态分类
PC和移动共用一套项目
1/华为
2/猎豹
PC和移动不是共用一套项目
1/京东
2/淘宝
移动web的现状
移动互联网的发展
智能手机迅速发展
移动web应用的发展
移动web需求逐年增加
前景良好，仍有问题
浏览器繁多，参差不齐
网速仍然是性能的瓶颈
多框架造成高门槛
PC与移动web开发的区别
终端设备
输入特性
屏幕
浏览器
开发调试
视口
布局方式
移动端屏幕3-1
PPI
代表屏幕没英寸的像素数量，即像素密度
高PPI屏幕 显示的元素会比较精细（看起来会比较小），低PPI屏幕显示的元素相对来说就比较粗糙（看起来比较大）
像素分类
设备像素(device independent pixels): 设备屏幕的物理像素，任何设备的物理像素的数量都是固定的
CSS像素(CSS pixels): 又称逻辑像素，是为web开发者创造，在CSS和JavaScript中使用的一个抽象的层
移动端屏幕3-2
屏幕缩放
PC端
css的1个像素往往都是对应电脑屏幕的1个物理像素
移动端
由于屏幕尺寸的限制，缩放是经常性的操作
设备像素(深蓝色背景)、CSS像素(半透明背景)
左图表示缩小操作时，1个设备像素覆盖了多个CSS像素，右图表示放大操作时，1个CSS像素覆盖了多个设备像素
移动端屏幕3-3
DPR
设备像素比DPR(devicePixelRatio)是默认缩放为100%的情况下，设备像素和CSS像素的比值
DPR = 设备像素 / CSS像素(某一方向上)
Retina屏幕
同样大小的屏幕上,像素多了一倍,DPR = 2
css像素与DPR计算
理想视口（后面讲到）
移动端浏览器及内核分析
PC端浏览器
chrome、safari、firefox、IE
移动端浏览器类型
内置浏览器、可下载浏览器、代理浏览器、webview
内核
Gecko内核,css前缀为"-moz-",代表 firefox
WebKit内核,css前缀为"-webkit-"，代表 chrome、苹果、微信等
Presto内核,css前缀为"-o-",代表Opera(欧朋)
Trident内核,css前缀为"-ms-",代表IE
移动端开发测试浏览器
使用Chrome浏览器作为移动开发测试浏览器的原因
很多的手机浏览器都用Webkit作为渲染引擎
Chrome浏览器移动测试环境3-1
常用面板
1、Device：可以选择要测试的设备及型号
2、Resolution：设备像素
3、屏幕显示比例，可以自行选择
4、Device pixel ratio：设备像素比
5、模拟网速情况
6、手持设备的横屏竖屏
7、可以点开这里进行查看隐藏的选项
视口
<style>
header{height: 50px ; background: pink; margin-bottom: 10px;}
aside{width: 30%; background: red; height: 300px; float: left;}
article{width: 68%; background: pink; height: 300px; float: left;}
</style>
<body>
<header></header>
<aside></aside>
<article></article>
</body>
布局视口
相同的内容，当窗口变窄，只是尽可能缩小网站来让用户看到网站的全貌。这对易读性来说不是件好事,在移动端上如何显示PC端的网页？
在移动端上，视口与移动浏览器屏幕宽度不再相关联，而是完全独立的，我们称它为布局视口
视觉视口
虽然布局视口很大程度上帮助了桌面网站到手机的转移，但我们还是不能完全无视移动端设备的屏幕尺寸
视觉视口是用户正在看的网站区域。用户可以通过缩放来操作视觉视口，同时不会影响布局视口，布局视口仍然保持原来的宽度
理想视口
默认情况下，一个手机或平板浏览器的布局宽度是在980px或1024px。虽然这能让桌面网站不被压扁，但是这并不理想，尤其对手机用户，因为在狭窄的屏幕上更适合一个狭窄的网站
真正适合手机的视口是什么呢？
理想视口
移动端网页开发
移动网页开发和PC网页开发有什么异同？
不同点
适配不同的分辨率和屏幕尺寸
兼容的浏览器
相同点
布局结构
使用的技术
使用相对长度单位 em 布局网页内容
em是描述相对与当前对象内文本的字体尺寸，他是相对长度单位
一般浏览器字体大小默认为 16px
相对单位em的特性
em的值并不是固定的
em会继承父级元素的字体大小（相对父级的字体大小而发生变化）
实际应用中每次都这样去乘以父级的大小也是很麻烦的，有什么方法可以简化？
如果1em等于10px，那计算起来就方便了
使用相对长度 rem布局网页内容
rem 是css3新增的一个相对单位（root em, 根 em）
rem 与 em 的区别在于使用rem 为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素
相对单位rem
相对单位rem的特性
rem的值并不是固定的
rem 是相对根节点html发生变化的 （和父节点无关）
实际开发中一般默认的把html根节点设置为 10px (62.5%) 或者是100px,方便后续计算
相对单位rem是集相对大小和绝对大小的优点于一身通过它既可以做到只修改根元素字体大小就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应
示例：
根据当前屏幕的宽度和设计稿的宽度来重新计算html的FontSize的大小
根据当前屏幕宽度和设计稿的宽度的比例，动态计算当前宽度下的fontsize值大小，如果fontsize值改变了，之前设定的所有的rem单位的值自动会跟着改变
var uiW = 750;
// 视口宽度
winW = document.documentElement.clientWidth，
// 比率
rate = winW / uiW;
// 设置字体大小
document.documentElement.style.fontSize = rate *100 + "px";
对比
em
通常不使用 em 单位控制字体大小
首行缩进: text-indent:2em;
rem
一切可扩展都应该使用 rem 单位
响应式网站可以使用rem去做适配
不要使用 em 或 rem
多列布局
当元素应该是严格不可缩放的时候
339
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
