移动端web开发：分辨率和设备像素比介绍
在移动端Web开发的过程中，除了要使用<meta>标签设置理想视口之外，还需要解决移动端页面中图片的显示问题。图片的显示是否清晰，与屏幕分辨率、图像分辨率和设备像素比有关。
分辨率分为屏幕分辨率和图像分辨率
屏幕分辨率是指一个屏幕上可以显示多少信息，通常以像素（px）为单位来衡量。在同一台设备上，图片的像素点和屏幕的像素点通常是一一对应的。
屏幕分辨率1920×1080表示水平方向含有1920个像素，垂直方向含有1080个像素，屏幕上总共有2 073 600个像素点。
在屏幕的大小相同的情况下，如果屏幕的分辨率低（如640×480），则屏幕上显示的像素少，单个像素点比较大，看起来会有种颗粒感
在屏幕的大小相同的情况下，如果屏幕的分辨率高（如1920×1080），则屏幕上显示的像素多，单个像素点比较小，看起来会比较清晰
图像分辨率500×200表示这张图片在屏幕上按1:1显示时，水平方向有500个像素点（色块），垂直方向有200个像素点（色块）
图片的分辨率越低，图片越模糊。图片的分辨率越高，图片越清晰
当图片放大时，图片在屏幕上显示的像素变大，软件通过算法对图像进行了像素补充
当图片缩小时，也是通过算法将显示的图片像素进行减少
在传统的PC端和早期的普通手机中，屏幕上的一个像素和网页CSS中的一个像素是完全对应的。随着技术的进步，为了提高屏幕显示的细腻度，高分辨率的屏幕开始流行，一块屏幕可以显示更多的像素。随之产生了一个问题，就是同一个网页在不同分辨率的屏幕下显示效果会有大小差异，因为CSS中使用的像素是一个固定值，它不会因为屏幕分辨率而发生改变。
在屏幕尺寸相同的情况下，一个12px的文字在低分辨率的屏幕中的尺寸很大，但在高分辨率的屏幕中尺寸很小。
在分辨率非常高的屏幕中，文字会显得特别小，不利于浏览。
在高分辨率屏幕中，CSS使用的像素单位和屏幕显示的像素并不是一对一的，将屏幕像素除以CSS像素得到的就是设备像素比。
为了解决这个问题，高分辨率设备的操作系统会对网页画面进行缩放，让大小看上去比较舒适，而网页中使用的像素也不必修改。尤其是网页中的文字，在高分辨率屏幕下的显示效果会更加细腻。例如，当设备像素比为4时，CSS像素和屏幕像素的转换关系。
来千语创想移动应用开发平台学习更多APP开发知识：app开发，app制作，app开发源码下载，app开发框架，app开发工具等免费获取。
千语创想-专业APP开发、app定制服务商，提供一站式移动应用解决方案，满足您的各类需求，欢迎免费评估需求和获取报价。
立即免费在线制作一个APP，新手注册即送开发大礼包
