一、移动端基础1、浏览器现状2、手机屏幕现状3、常见移动端屏幕尺寸4、移动端调试方法5、总结·移动端浏览器我们主要对webkit内核进行兼容·我们现在开发的移动端主要针对手机端开发·现在移动端碎片化比较严重,分辨率和屏幕尺寸大小不一·学会用谷歌浏览器模拟手机界面以及调试二、视口定义:视口(viewport)就是浏览器显示页面内容的屏幕区域.视口可以分为布局视口、视觉视口和理想视口1、布局视口(layout viewport)·一般移动设备的浏览器都默认设置了一个布局视口,用于解决早期的PC端页面在手机上显示的问题·ios、Android基本都将这个视口分辨率设置为980px,所以PC上的网页大多都能在手机上呈现,只不过元素看上去很小,一般默认可以通过手机缩放网页2、视觉视口(visual viewport)·字面意思,它是用户正在看到的网站的区域(注意: 是网站区域)·我们可以通过缩放去操作视觉视口, 但不会影响布局视口,布局适口仍保持原来的宽度3、理想视口(ideal viewport)·为了使网站在移动端游最理想的浏览器和阅读宽度而设定·理想视口,对设备来讲,是最理想的视口尺寸·需要手动添写meta视口标签同志浏览器操作·meta视口标签的主要目的: 布局视口的看度应该与理想视口的宽度一致,简单理解就是设备有多宽,我们布局的视口有多宽4、meta视口标签标准的viewport设置:·视口宽度和设备保持一致·视口的默认缩放比例为1.0·不允许用户自行缩放·最大允许的缩放比例为1.0·最小允许的缩放比例为1,0三、二倍图1、物理像素和物理像素比·物理像素点指的是屏幕显示的最小颗粒,是物理真实存在的,这是厂商在出厂就设置好了的·我们开发时候的1px不是一定等于1个物理像素的·PC端页面,1个px等于一个物理像素的,但是移动端就不尽相同(例如 iphone8为1: 2)·一个px的能显示的的物理像素点的个数,称为物理像素比或屏幕像素比2、多倍图·对于一张50px * 50px的图片,在手机Retina屏中打开,按照刚才的物理像素比会放大倍数,这样会造成图片模糊·在标准的viewport设置中,使用倍图来提高图片质量,解决在高清设备中模糊问题·通常使用二倍图,因为iphone6/7/8的影响,但是现在还存在3倍图/4倍图的情况,需要根据开发公司的实际需求·背景图片注意缩放问题2.1 背景缩放定义: background-size属性规定背景图像的尺寸语法: background-size: 背景图片宽度 背景图片高度;特点:a,单位: 长度|百分比|cover|containb,cover把背景图像扩展至足够大,以使背景图像完全覆盖背景区域,可能有部分背景图片显示不全c,contain把图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域,高度和宽度等比例拉伸,当高度或宽度铺满父级盒子就不再进行拉伸.可能有部分空白区域