一、移动端基础
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|contain
b,cover把背景图像扩展至足够大,以使背景图像完全覆盖背景区域,可能有部分背景图片显示不全
c,contain把图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域,高度和宽度等比例拉伸,当高度或宽度铺满父级盒子就不再进行拉伸.可能有部分空白区域
