使用vw实现移动端布局的思路

vw实现移动端布局的思路推算

        100vw相对于和ui设计图的大小是一样的 1vw就是设计图的百分之一

        100vw / 设计图的大小 = 每一份大小

        得到的每一份(百分之一的视口宽度的单位是xp) 如何把像素转化为rem

    在工作中写项目的时候 无论用哪种方法都要考虑 设备像素比 dpr = 物理像素/逻辑像素

    1.常见的设计图为640px dpr为2

        640px / 2 = 320px (逻辑像素)

        320px = 100vw (100vw为320px)

        1vw = 3.2px (视口宽度的百分之一就是3.2px像素)

        1px = 0.3125vw (一像素占据640px设计图的0.3125vw(百分之0.3125))  !!!!!!!!!!!!!!!

        开始推算:导航高度是88px

            88px / 2 = 44px (注意1px为0.3125vw)

            导航的高度为: 44px * 0.3125vw = 13.75vw(占据了视口的百分之13.75) (有一个具体的xp像素值)  !!!!!!!!

            底部高度: 50px * 0.3125vw = 15.625vw(占据了视口的百分之15.625) (有一个具体的xp像素值)

        思考:能不能让计算得到的这个px值 每次都自动的乘以0.3125vm?  (最后要转化为xp值的)

            rem可以做到,rem转化为xp值的时候需要 * font-size的值

            html{font-size:0.3125vw}

            把44px => 44rem 

            当44rem想要转化为px的时候会自动 * font-size:0.3125vw = 13.75vw = 640px * 13.75vw(%) = 88px(实际测量出来的高度) => 我们的逻辑像素层面最大宽度为320px => 320px * 13.75vw(%) = 44px

            44px (在640px设计图中这个等式成立)

            当我们把44px转化为44rem的时候 => 44rem * 0.3125vw = 13.75vw => 意味着占据了13.75vw (占据了整个视口的13.75%)而在设计图中13.75%就意味着44px