vw结合rem实现移动端布局

Posted 2021-02-04 web-learning

继上一篇《媒体查询结合rem实现移动端布局》的改进！
还是以昨天写的页面为例

上一回说到了媒体查询结合rem做移动端布局，步骤如下

首先设置媒体查询，确定html中font-size值的变化

            @media all and (max-width:320px){
                html{font-size:12px;}
            }
            @media all and (min-width:321px) and (max-width:375px){
                html{font-size:14px;}
            }
            @media all and (min-width:376px){
                html{font-size:16px;}
            }

实现步骤：

        1:例如设计图为750px .设计图量出height为88px;
        2:考虑dpr为2，量出header高度为88px，所以88px / 2 == 44px
        3:44px == ?rem
        4:因为设计图为750px 所以范围在(min-width:321px) and (max-width:375px)   所以现在1rem == 14px;
        5:44px / 14px == ?rem;

今天就是在上一次的基础上再加以改进。媒体查询结合rem计算数值太费劲，每次都要用计算器算。而vw就不一样了，只需要先除以dpr，再除以100，口算比较容易。

直接在重置样式后面写上定义html中font-size的值就行。

如果设计图为640px  html{font-size:31.25vw}
如果设计图为750px  html{font-size:26.67vw}

实现的步骤：
1：例如设计图为750px .设计图量出height为88px;
2：考虑dpr  88px / 2 == 44px
3：44px / 100 == 0.44rem   (26.67vw 或者31.25vw   等同于  100px)