移动端屏幕适配

ios

pt与px的换算

ios中的pt表示逻辑分辨率(在打印时pt表示磅，是一个长度单位，即1/72英寸)。
ppi（dpi）表示对角线上一英寸物理像素的多少。

设备类型	逻辑分辨率（pt）	物理分辨率（px）	倍图（@Reader）	尺寸
iPhone3GS	320x480	320x480	@1x	3.5
iPhone4/4s	320x480	640x960	@2x	3.5
iPhone5/5c/5s	320x480	640x1136	@2x	4
iPhone6/6s	375x667	750x1334	@2x	4.7
iPhone6plus+	414x736	1242x2208（实际1080x1920）	@3x	5.5
iPhoneX	375x812	1125x2436	@3x	5.8

可以看到iPhone的屏幕越大显示内容越多，显示效果越精细

Android

dp与px的换算

dp是Android特有的单位

密度类型	物理分辨率	逻辑分辨率（dp）	屏幕密度	比率	换算
低密度	240x320	320x480	120	1px=0.75dp	3
中密度	320x480	320x480	160	1px=1dp	4
高密度	480x800	320x480	240	1px=1.5dp	6
超高密度	720x1280	360x640	320	1px=2dp	8
超超高密度	1080x1920	360x640	480	1px=3dp	12

可以看到1080/480>480/240，所以超超高密度屏幕比高密度屏幕能显示更多内容

H5

rem等比例适配所有屏幕：

各种设备屏幕大小不同，分辨率也不同，使用rem适配不同屏幕非常高效，这种方法不同屏幕显示的内容量是一样的，大屏幕显示的内容不会更多。计算根元素字体的大小：

//使用这种方式在meta标签中设置width=device-width与否,不会对最终效果产生影响
(function(){
    var currClientWidth,
        fontValue,
        originWidth;
    originWidth = 750;//ui设计稿的宽度，一般750或640
    getFontValue();
    
	function getFontValue() {
        currClientWidth = document.documentElement.clientWidth;
        if (currClientWidth > 768){
            currClientWidth = 768;
        } 
        if (currClientWidth < 320){
            currClientWidth = 320;
        } 
        //倍率为100是为了方便计算，根元素字体大小为100/（设计稿宽度/屏幕宽度），其中屏幕宽度为物理像素
        fontValue = ((50 * currClientWidth) / originWidth).toFixed(2);
        document.documentElement.style.fontSize = fontValue + 'px';
    }
    
    window.addEventListener('resize', getFontValue, false);
})();

设置某元素的rem值时，取值为ui设计稿的值除以100，例如，某元素宽为300，那么其css代码为width: 3rem;