移动端适配（一）设备独立像素1px问题，前端需要知道
影视剪辑魔术师2018-03-30 23:32
1.首先你要知道什么是绝对长度单位，什么是相对长度单位？绝对长度单位：pt;pt point，点，印刷行业常用单位，等于1/72英寸。相对长度单位：px、em、rem、vw、vh;
px pixel指一张图片中最小的点。如果点很小，那画面就清晰，我们称它为“分辨率高”，反之，就是“分辨率低”。所以，像素的大小是会“变”的。
em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。
rem是CSS3新增的一个相对单位。这个单位与em有什么区别呢？区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。兼容性IE9+。
1vw等于视口宽度（viewport width）的百分之一，也就是说100vw就是视口的宽度。同理，1vh等于视口高度（viewport height）的百分之一。vw,vh是css3中新增的单位。通过测试发现“视区/视口”指浏览器内部的可视区域大小，即window.innerWidth/window.innerHeight大小，不包含任务栏标题栏以及底部工具栏的浏览器区域大小。这两个单位和%百分比有点类似，只是%一般相对于父元素，另外：vh、vw永远都是相对于视窗大小的。最主要能解决的一个问题就是原来想要做高度自适应很困难，现在很容易了。一个body{height: 100vh}就搞定了。兼容性IE9+。最后，为什么要提起vw，vh？小程序最近很火，它在它的开发文档里也提到这个单位，用来做适配。也就是说小程序是支持这两个单位的。验证了那句话，事出必有因。
2.然后你需要知道什么是屏幕尺寸、屏幕分辨率、屏幕像素密度？屏幕尺寸：指屏幕的对角线的长度，单位是英寸。常见屏幕尺寸：
iphone43.5英寸
iphone54英寸
iphone64.7英寸
iphone6 plus5.5英寸
iphoneX5.8英寸
屏幕分辨率：指在横纵上的像素点数。常见屏幕分辨率：
iphone4640*960
iphone5640*1136
iphone6750*1334
iphone6 plus1080*1920
iphoneX1125*2436
屏幕像素密度（dpi或ppi）: 屏幕上每英寸可以显示的像素点的数量。dpi=ppi。像素密度dpi或ppi=对角线分辨率/屏幕尺寸=屏幕对角线上的像素点数/对角线长度 = √ （屏幕横向像素点^2 + 屏幕纵向像素点^2）/对角线长度。注：对角线长度即屏幕尺寸。手机按屏幕划分，屏幕像素密度(dpi/ppi)越大越清晰。谷歌区分手机屏幕按照：mdpi、hdpi、xhdpi、xxhdpi；苹果区分手机屏幕是按照：非高清屏，高清屏（视网膜屏即retina屏）、超高清屏;常见屏幕ppi:
Iphone4326ppi
Iphone5326ppi
Iphone6326ppi
Iphone6 plus401ppi
Iphone X:424ppi
小知识点：HD高清即指分辨率达到720p以上的格式。视网膜（retina）设备：分辨率达到300ppi(每英寸300个像素点)，所以苹果从iphone4开始就已经是retina屏了。在retina屏上用1倍图会模糊。普通屏幕下即dpr=1，用两倍图片，肉眼看上去虽然图片不会模糊，但是会觉得图片缺少一些锐利度，或者是有点色差，但可以接受。同样用在超retina屏,dpr=3比如iphone6 plus、iphonex上，就是有点失色，但也可以接受，所以我们只要一个@2x的图即可。3.dpr是什么?英文全称devicePixelRatio，设备像素比。设备像素比dpr=物理像素的个数/设备独立像素（通常指1个）;另外dpr可以直接由js的内置属性获得：dpr=window.devicePixelRatio;设备独立像素（又称设备无关像素 Device Independent Pixels 、密度独立性 Density Independent或设备独立像素，简称DIP或DP）是一种物理测量单位。设备独立像素dip到底有什么用呢？dip用来辅助区分视网膜设备还是非视网膜设备。1dp表示在屏幕像素点密度为160ppi时1px长度。1px问题由于有retina屏的存在，移动端设计稿多是以手机尺寸的2倍尺寸出，这时设计稿上的1px像素，如果前端也写成1px的话，在devicePixelRatio=2的retina屏下会显示成2px，所以在高清屏下看着1px总是感觉变胖了。也就是说按正常前端的开发，我们应该写成0.5px,但是一些老系统，比如ios7以下，android等会把0.5px, 解读成0px,就没有边框了，所以只能写成1px。好在，现在css3的普及，这个问题可以这样解决：利用transform:scale(x,y)，设置线条为1px，然后通过transform:scale(x,y)来缩放线条为原来的一半，可显示0.5px的线条。好了，关于移动端适配，前端需要知道的一些基本概念就写到这，接下来我们会写移动端适配前端必须掌握的技能，属于实操应用，欢迎继续关注收藏程序思维，每天读我们的原创文章，共同进步，一起走向大前端。
举报/反馈
0
0
收藏
分享
