CSS移动端 - 技术栈

一、移动端基础

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把图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域,高度和宽度等比例拉伸,当高度或宽度铺满父级盒子就不再进行拉伸.可能有部分空白区域