手机端的1px边框如何实现

（1）、把边框设置为absolute,使用after,定义宽度为1px（mixin.styl）

 

（2）、通过@media,判断不同的dpi,来改变相应的Y轴宽度（base.styl），定义公共class border-1px，在用到1px边框的地方，加上border-1px

 

 

设备像素

又叫物理像素 
是显示屏能够控制的最小显示单位.

css像素

它就是css上用的像素: border: 1px solid black; 它是web编程抽象的概念,不存在的, 它独立于设备, 用于在逻辑上衡量像素

设备独立像素

也叫密度无关像素 
用于独立于设备,用于逻辑上衡量像素的单位, 也就是css像素, 可转换为物理像素。 
所以说，物理像素和设备独立像素之间存在着一定的对应关系。

获取

screen.width
screen.height

误区,在pc端,我们一直认为这是分辨率,其实不是,只是因为PC端设备像素和设备独立像素数值相等

设备像素比   device-pixel-ratio

是设备上物理像素和设备独立像素(device-independent pixels (dips))的比值

通过控制整个值,可以控制页面的放大,快捷键Ctrl+的原理就是这个.

//chrome 为1
window.devicePixelRatio

PPI

像素密度（pixel density）. 
全称是（pixel per inch）就是每英寸内有多少个设备像素点. 
PPI的值越高，画质越好，也就是越细腻，看起来更有逼格。 
标准的PPI是160, 不过现在屏幕标准的少了, 都超过了160. 
PPI 值超过300的叫做超高密度屏幕，Apple 给它换了个高大尚的名称：Retina视网膜屏幕

你比如Iphone 5s 设备像素比为2，Iphone 6s 设备像素比为3。至于安卓机中的设备像素比就更多了，有1.3、1.5、2、3等等。 
查看更多设备像素比: http://devicepixelratio.com/

参考文章: http://yunkus.com/physical-pixel-device-independent-pixels/

 

转载于:https://www.cnblogs.com/zhaobao1830/p/6411776.html