移动端基础

移动端基础

像素

物理像素

整个屏幕是由一个个的点组成的，每个屏幕上的点一定是有限的，这些有限的点就叫做像素，或者物理像素。

分辨率

每一个长度方向上的像素个数乘以每一个宽度方向上的像素个数的表示形式，就叫做分辨率。

逻辑像素

逻辑像素也叫做：css像素、设备独立像素。

设备像素比

dpr：device pixel ratio
dpr=设备像素/css像素

缩放

物理像素是不能改变大小的
缩放其实就是改变1css像素等于多少个物理像素，换言之，就是1个css像素需要用多少个物理像素表示

放大

原理1个css像素=1个物理像素
放大2倍，就是让一个css像素的宽和高都放大2倍，所以我们看到在右边屏幕上，放大2倍后，1个css像素就占用了4个像素点。
所以，放大2倍后，1个css像素=2*2个物理像素、

缩小

原来1个css像素=1个物理像素
缩小到1/2后，1个css像素的宽和高都缩小到原来的1/2，所以我们看到右边屏幕上，缩小后，4个css像素才等于1个css像素
所以，缩小1/2后，2x2个css像素=1个物理像素

ppi

pixels per inch，表示每英寸的物理像素点，这考验一个屏幕厂商的设计和生产能力
ppi，也称作 dpi(dots per inch)
如小米11的 ppi 为 515
屏幕上的像素点也是多，也是密集，则显示就越精细，所以 ppi 是一个屏幕显示效果的重要参数
ppi的计算方法

二倍图

对于一张50x50的图片在标清屏下打开，1css像素=1个物理像素

如果在 Retina 屏幕中打开，在单一方向上，1css像素=2个物理像素，这样会造成图片模糊

解决方案就是使用倍图提高图片质量，解决在高清设备中存在的模糊问题

核心思路

比如希望在手机屏幕中显示一张100x100的图片
先制作一张200x200 的图片
通过css设置其逻辑尺寸为100x100
高清屏下手机浏览器会放大2倍显示，正好是200x200，正好是图片本身尺寸
注意：放大2倍，并不是图片的css尺寸放大2倍，而是使用2倍的物理像素点显示图片，会造成图片中的暗区等都爆露出来，造成模糊效果

视口

视口（viewport）就是浏览器显示页面内容的屏幕区域。 视口可以分为布局视口、视觉视口和理想视口

布局视口

为了在手机上也能够显示这些为PC端专门设置的网页，出现了布局视口的概念
布局视口的宽度一般为980，也有 1024 的

视觉视口

用户正在看到的网站的区域

理想视口

理想视口，对设备来讲，是最理想的视口尺寸，为了使网站在移动端有最理想的浏览和阅读宽度而设定

需要设置 meta 标签进行设置

meta视口标签的主要目的：布局视口的宽度应该与理想视口的宽度一致，简单理解就是设备有多宽，我们布局的视口就多宽

总结：我们开发最终会用理想视口，而理想视口就是将布局视口的宽度修改为视觉视口