移动端适配基础
-
英寸
用于描述屏幕的物理大小
1英寸 = 2.54cm
分辨率
- 像素
- 即一个小方块
- 可作为图片或电子屏幕的最小组成单位
- 屏幕分辨率
- 指屏幕含有的像素数
- 屏幕分辨率越高不代表屏幕越清晰,屏幕的清晰程度还与屏幕的尺寸有关
- 图片分辨率
- 指图片含有的像素数
- 同一尺寸的图片,分辨率越高,图片越清晰
- PPI(Pixel per Inch)
- 每英寸包括的像素数
- 可用于描述图片的质量或屏幕的清晰度
- PPI越大,图片质量越高,屏幕越清晰
- DPI(Dot per Inch)
- 每英寸包括的点数
- 点:屏幕像素点、图片像素点或者是打印机的墨点等,是硬件设备最小的显示单元
屏幕
- 屏幕尺寸
- 屏幕对角线的长度,单位是英寸
- 常见屏幕尺寸有2.4、2.8、3.5、3.7、4.2、5.0、5.5、6.0等
- 屏幕分辨率
- 指横纵向上的像素点数,单位是px
- 一般用纵向像素点 * 横向像素点来表示手机的分辨率
- 屏幕像素密度/像素密度/屏幕密度
- 指屏幕每英寸可以显示的像素点的数量,单位是ppi(pixels per inch)
像素
-
物理像素/设备像素
- 当我们买手机的时候会有一个n*m的分辨率,那是屏幕呈像的点,一个点为一个物理像素。
- 任何设备的物理像素出厂时就确定了,是固定的
- 设备像素/物理像素是显示设备中最微小的物理部件
-
设备独立像素(Device Independent Pixels)
- 与设备无关的逻辑像素
- 简称
DIP
或DP(Density Independent)
- 对设备独立像素的理解
- 我们必须用一种单位来告诉不同分辨率的手机,它们在界面上显示元素的大小是多少,这个单位即是
DIP
; - 也可以将其理解为计算机坐标系中的一个点,这个点代表一个可以由程序使用的虚拟像素,然后又相应系统转换为物理像素
- 我们必须用一种单位来告诉不同分辨率的手机,它们在界面上显示元素的大小是多少,这个单位即是
- 设备独立像素包含了CSS像素
设备独立像素的产生:
随着智能手机的发展,高分辨率的手机越来越多。那理论上来说,分辨率为
320*480
手机上的图片和文字,在分辨率为640*950
的手机上会被缩放一倍,因为后者的分辨率提高了一倍,那么不就出现了分辨率越高、页面内容越小 的问题吗?然而并不是这样。在
iPhone4
的发布会上,乔布斯首次提出了Retina Display
(视网膜屏幕)的概念,即将2*2
个像素当成一个像素用,这样的屏幕看起来更加的精致,但元素的大小却不会改变回到我们上面的例子,也就是说,假如有一张图片的宽度为300像素,那么前者会用300个物理像素去渲染它,后者则会用600个物理像素去渲染它。
当我们说图片的宽度为300个像素时,实际上可以说是:图片的宽度为300个设备独立像素
- CSS像素(CSS Pixel)
- CSS像素是一个抽象的单位,主要使用在浏览器上,用来精确的度量(确定)Web页面上的内容。它是为web开发者创造的,在CSS或者JavaScript中使用的一个抽象的层。
- CSS像素的单位为
px
设备像素比
在视网膜屏幕出现后,才有了设备像素比这个概念。在这之前,移动设备都直接使用物理像素进行展示
- 设备像素比简称
dpr
(device pixel ratio),即物理像素/设备独立像素 - 设备像素比大于1的屏幕是高清屏
- 在web中,我们可以用
window.devicePixelRatio
获取设备像素比
移动端适配
手机屏幕在最开始的时候,像素与发光点也是一一对应的,因此在之前,移动端的布局同pc端一样,直接写
px
就好了。- 为了适配所有机型,我们在写样式时需要将物理像素转换为设备独立像素
- 有条件的话,和设计沟通好,所有的
UI
图按照设备独立像素来出
视口
视口(viewport)代表当前可见的计算机图形区域,通常情况下视口与浏览器窗口相同,但不包括浏览器的
UI
在手机互联网没有普及前,网络上的绝大部分页面都是为电脑端浏览而做的,根本没有做移动端的适配。
随着移动端的发展,在手机上看网页这件事也变得非常普及。而电脑端页面较大,移动宽度有限。要想看到整个网页,会有很长的滚动条,非常麻烦。于是,浏览器厂商为了让用户在小屏幕网页下也能够显示的很好,所以把布局视口设置的很大,一般在
768px~1024px
,其中最常见的是980px
-
布局视口(layout viewport)
- 浏览器厂商设置的固定值 ,如
980px
,即是将980px
的内容缩放到手机屏幕内。 - 当我们以百分比来指定元素大小时,它的的值是基于这个元素的父元素计算而来。当这个元素是顶级元素时,它就是基于布局视口来计算的
- 在
PC
浏览器上,布局视口就相当于当前浏览器的窗口大小(不包括border
、margin
、滚动条) - 在移动端,布局视口被赋予一个默认值,大部分为
980px
,这保证PC
的网页可以在手机浏览器上呈现,但是非常小,用户可以手动对网页进行放大。 - 我们可以通过调用
document.documentElement.clientWidth
、document.documentElement.clientHeight
来获取布局视口的大小 - 媒体查询时的
max-width
和min-width
的值指的也是布局视口的宽度
- 浏览器厂商设置的固定值 ,如
-
视觉视口(visual viewport)
- 用户通过屏幕真实看到的区域,默认值为当前浏览器的窗口大小(包括滚动条)
- 当用户对浏览器进行缩放时,布局视口不变,而视觉视口发生相应的变化
例如用户将浏览器窗口放大了200%,这时浏览器窗口中的CSS像素会随着视觉视口的放大而放大,这时的一个CSS像素会跨越更多的物理像素
- 我们可以通过调用
window.innerWidth
、window.innerHeight
来获取视觉视口的大小
-
理想视口(ideal viewport)
- 布局视口在移动端展示的效果并不是一个理想的效果:因为移动端的视觉视口通常小于浏览器默认的
980px
的布局视口,所以苹果引入了理想视口这一概念:网站页面在移动端展示的理想大小,即整个页面刚好覆盖手机屏幕,屏幕不会产生滚动条 - 此时布局视口的宽度就定义为设备宽度
device-width
- 我们可以通过
screen.width
、screen.height
来获取理想视口的大小
- 布局视口在移动端展示的效果并不是一个理想的效果:因为移动端的视觉视口通常小于浏览器默认的
- 像素