px-rem-vw

70 阅读1分钟

px-rem-vw

设备像素比 =  物理像素  / 逻辑像素
    2     = ps中侧量的 / css上写的
	
写移动端的需求:
	希望页面内容能够跟随浏览器窗口的大小变化而变化

        测量出来的是 	px单位
        需要写的是 	rem单位,跟根元素的font-size值成倍数关系
        需要跟随浏览器窗口变化的是        vw单位




设计稿 = 750px  dpr=2  设备宽度: 375px
	100vw = 满屏 = 375px
	1vw = 3.75px
	
	假设: html{font-size:120px;}
	1rem = 120px
	
	1rem = 120px / 3.75px = 32vw
    结论:
        html{font-size:32vw;}
        工具设置: 120   测量出来的值转rem前都需要减半再转
        工具设置: 240   测量出来的值,直接转rem
		
        设计稿 = 640px  dpr = 2  设备宽度: 320px
                100vw = 满屏 = 320px
                1vw = 3.2px

                假设 html{font-size:120px;}
                1rem = 120px
                1rem = 120px / 3.2px = 37.5vw
    结论:
         html{font-size:32vw;}
                工具设置: 120   测量出来的值转rem前都需要减半再转
                工具设置: 240   测量出来的值,直接转rem

设计稿 = 1080px  dpr = 3 设备宽度: 360px
        100vW = 360px
        1vw = 3.6px

        假设: html{font-size:80px;}
        1rem = 80px
        1rem = 80px / 3.6px = 22.22vw

    结论:
         html{font-size:22.22vw;}
                工具设置: 80   测量出来的值转rem前都需要减半再转
                工具设置: 240   测量出来的值,直接转rem