- 基础知识
- 物理像素
- 屏幕的分辨率
- 设备能控制显示的最小单位,可以把物理像素看成对应的像素点
- 设备独立像素 & css像素
- 设备独立像素(也叫密度无关像素),可以认为是计算机坐标系统中的一个点,这个点代表一个可以由程序使用并控制的虚拟像素(比如:CSS 像素,只是在android机中CSS 像素就不叫”CSS 像素”了而是叫”设备独立像素”),然后由相关系统转换为物理像素。
- DPR、DPI、PPI
- DPR: 设备像素比,物理像素/设备独立像素 = dpr, 一般以Iphon6的dpr为准 dpr = 2
- PPI: 一英寸显示屏上的像素点个数
- DPI:最早指的是打印机在单位面积上打印的墨点数,墨点越多越清晰
- 视口
- 布局视口:在浏览器窗口css的布局区域,布局视口的宽度限制css布局的宽。为了能在移动设备上正常显示那些为pc端浏览器设计的网站,移动设备上的浏览器都会把自己默认的viewport设为980px或其他值,一般都比移动端浏览器可视区域大很多,所以就会出现浏览器出现横向滚动条的情况。
- 视觉视口:用户通过屏幕看到的页面区域,通过缩放查看显示内容的区域,在移动端缩放不会改变布局视口的宽度,当缩小的时候,屏幕覆盖的css像素变多,视觉视口变大,当放大的时候,屏幕覆盖的css像素变少,视觉视口变小。
- 理想视口:一般来讲,这个视口其实不是真是存在的,它对设备来说是一个最理想布局视口尺寸,在用户不进行手动缩放的情况下,可以将页面理想地展示。那么所谓的理想宽度就是浏览器(屏幕)的宽度了。
- 布局视口:在浏览器窗口css的布局区域,布局视口的宽度限制css布局的宽。为了能在移动设备上正常显示那些为pc端浏览器设计的网站,移动设备上的浏览器都会把自己默认的viewport设为980px或其他值,一般都比移动端浏览器可视区域大很多,所以就会出现浏览器出现横向滚动条的情况。
- 扩展内容
- 视网膜屏幕是分辨率超过人眼识别极限的高分辨率屏幕,由苹果公司在2010年在iPhone 4发布会上首次推出营销术语。
- Iphone的dpr = 2; 人类肉眼分辨的极限
- 问题: Iphone6的dpr为多少?Iphone6Plus比Iphone6显示图像清晰吗?
- 物理像素
- 适配方案
- viewport适配方案
- rem适配方案
- 小程序适配方案
- Iphon6: 1rpx = 1物理像素 = 0.5px
- 微信官方提供的换算方式:
- 1.以iPhone6的物理像素个数为标准: 750;
- 2.1rpx = 目标设备宽度 / 750 * px;
- 3.注意此时底层已经做了viewport适配的处理,即实现了理想视口
移动端适配方案
最新推荐文章于 2024-06-01 21:54:01 发布