主要内容
什么是移动端移动端视口remempx区别移动端适配移动端布局马蜂窝案例学习目标
第一节移动端介绍
通过手机预览的网页，就是手机端网页
网页分为：
pc端网页移动端网页小程序
ios工程师安卓工程师
1.1早期移动端适配
比如：手机端切换的百度首页的状态，视口大小是缩放网页
点击新闻，进入手机端状态
1.2移动端视口
三个视口
1.布局视口
2.视觉视口
3.理想视口
布局视口的默认宽度并不是一个理想的宽度。显然用户希望在进入页面时可以不需要缩放就可以有一个理想的浏览和阅读尺寸。理想视口仍是为移动端设备准备的。只有手动添加meta视口标签方才生效。如果没有meta视口标签，那么布局将会维持它的默认宽度。
如下代码，告诉浏览器，布局视口的宽度应该与理想视口的宽度一致。（一般来讲我们都会将布局视口的宽度设为设备宽度一样，然后使用css媒体查询编写一套针对移动端的展示方案。）
metaname=viewportcontent=width=device-width,initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=0
metaviewport标签首先是由苹果在其safari浏览器中引入的，目的就是解决移动设备的viewport问题。后来安卓以及各大浏览器厂商也都纷纷效仿，引入对metaviewport的支持，事实也证明这个东西还是非常有用的。
在苹果的规范中，metaviewport有6个属性(暂且把content中的那些东西称为一个个属性和值)，如下：
width设置layoutviewport的宽度，为一个正整数，或字符串width-deviceinitial-scale设置页面的初始缩放值，为一个数字，可以带小数minimum-scale允许用户的最小缩放值，为一个数字，可以带小数maximum-scale允许用户的最大缩放值，为一个数字，可以带小数user-scalable是否允许用户进行缩放，值为no或yes,no代表不允许，yes代表允许1.3视口添加代码区别
代码演示
加上视口
本章作业
了解移动端视口布局
第二节移动端适配
2.1移动端像素介绍
2.1.1物理像素
1)屏幕的分辨率/设备像素
2)设备能控制显示的最小单元，可以把物理像素看成是对应的像素点
2.1.2设备独立像素css像素
设备独立像素(也叫密度无关像素)，可以认为是计算机坐标系统中的一个点，这个点代表一个可以由程序使用并控制的虚拟像素(比如：CSS像素,只是在android机中CSS像素就不叫”CSS像素”了而是叫”设备独立像素”)，然后由相关系统转换为物理像素。
2.1.3dpr比DPIPPI
1)dpr:设备像素比，物理像素/设备独立像素=dpr，一般以Iphon6的dpr为准dpr=2
Ipon6:设计稿大小分辨率/手机的css=2
2)PPI:一英寸显示屏上的像素点个数
3)DPI：最早指的是打印机在单位面积上打印的墨点数，墨点越多越清晰
2.1.4扩展内容
Iphone的dpr=2;人类肉眼分辨的极限
2.2pxremem区别？
remempx区别：
px:像素点相对于屏幕分辨率固定的
rem:相对大小受根源元素影响html
em：相对大小受父元素的影响
默认：1rem=1em=16px
如何自适应字体大小改变？
因为rem受根元素大小的影响，所以不同的手机分辨率下修改html大小实现控制页面字体大小
2.3移动端适配
适配的目标
引用一文章的描述：
在不同尺寸的手机设备上，页面“相对性的达到合理的展示（自适应）”或者“保持统一效果的等比缩放（看起来差不多）”
1.
2.js动态设置根元素fontSize
3.最简单的移动端适配方案(rem+vw)
在很早以前,vw这个单位就已经被列入w3c规范了,如果基本都支持了,vw表示屏幕的1%,可能有人会问到那跟百分比有什么区别呢?通常,很多情况确实可以被百分比替代,但是要知道百分比如果要子n代元素都生效,那得所有父级元素都得相对html,body%宽才能有作用,而vw则永远相对屏幕1%.说了vw的含义来说说怎么结合rem适配吧.这里直接给出结果,只需一行代码即可
html{font-size:13.vw}
然后我们即可根据设计稿(前提设计稿是px的),这样我们写1rem即为设计稿上的px
效果如上图所示,注意:应设置meta为移动端
metaname=viewportcontent=width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no
是不感觉很诧异,写的width:1rem,heigth:1rem的div就是50px*50px(iphone6为2倍屏,即对应px设计稿上的px*px)怎么搞定的,1句代码就能实现,太神奇.不信可以看看上图或者自己试一下.恩,就是这么简单,1句css代码就搞定,无需任何的js代码.
方案只能兼容手机,甚至连ipad兼容都不好,当然,此处的兼容不是兼容问题,是效果问题,只要兼容vw的设备都能用这个方案,但是由于适配的根本是vw这个,这个会随着设备的宽度越来越大,那么用rem做单位的元素也会越来越大,以至于如果这个在pc上,那么没法预览了,效果会很差,字太大了.这样我们可以设置一下当屏幕过大的时候的情况,我们可以加一句代码
media(min-width:px){html{font-size:54px;}}第三节马蜂窝案例
3.1移动端设计稿测量和实现
3.2还原设计稿
3.3马蜂窝移动端布局