尺寸单位

239 阅读1分钟

h5、Android、iOS尺寸单位

设备像素 (物理像素):组成屏幕的最小单位
分辨率:2560 x 1600(13英寸inch)
    意思是长2560个像素,宽1600个像素,对角线是13inch
    
CSS 像素 (虚拟像素):指的是 CSS 样式代码中使用的逻辑像素,在 CSS 规范中,长度单位可以分为两类,绝对单位以及相对单位。px 是一个相对单位,相对的是设备像素。
    
ppi:每英寸包含的像素个数,屏幕像素密度
dpi:约等ppi,用于打印机,每英寸包含的开发像素点,屏幕像素密度
    
pt(iOS):绝对长度单位,= 1/72 inch
dp(Android):设备独立像素(css的px类似dp),相对长度单位
sp(Android): (可缩放独立像素)相对长度单位
    
window.devicePixelRatio(h5): 独立设备像素比 = dp(andriod)/px(h5)

https://www.cnblogs.com/wangjiafang/p/4433912.html

如何实现CSS 0.5px?

1.  transform: scaleY(.5);
    border-top: 1px solid red;
    
2. 
    @media (-webkit-min-device-pixel-ratio: 2) {
        &:before {
            width: 200%;
            height: 200%;
            -webkit-transform: scale(.5);
        }
    }
    @media (-webkit-min-device-pixel-ratio: 2.5) {
        &:before {
            width: 250%;
            height: 250%;
            -webkit-transform: scale(.4);
        }
    }
    @media (-webkit-min-device-pixel-ratio: 2.75) {
        &:before {
            width: 275%;
            height: 275%;
            -webkit-transform: scale(1 / 2.75);
        }
    }
    @media (-webkit-min-device-pixel-ratio: 3) {
        &:before {
            width: 300%;
            height: 300%;
            transform: scale(1 / 3);
            -webkit-transform: scale(1 / 3);
        }
    }