css的常用单位px、em、rem、vh，vw

近来一直在做微信小程序的开发，基础的css的东西都快要忘记了。今天比较闲整理一下，以备后期查看。

1、px：px是绝对单位，1px是1像素；比如：电脑屏幕分辨率是1920*1200，那么对应的像素值是1920px*1200px
2、em：em是相对单位，相对于其父元素；

css：
    div{
        font-size: 24px;
    }    
    p{
        font-size: 0.5em;  // p=0.5*24px
    }

html：
    <div>
        我是父元素，我的字体大小为：24px

<p>我是子元素，我的字体大小为：0.5*24px = 12px</p> </div>

　3、rem：rem是相对单位，相对于html元素；比如：html的字体大小是100px，p元素的字体大小是16px，那么p的字体大小应设置为0.16rem；目前来说，rem作为页面适配的解决方案，应用非常广泛。

　　rem的适配方式分为js+rem组合， cal+rem组合， media+rem组合

js+rem组合方式: 

 
 function setHtmlFontSize() {
        const docEle = document.documentElement
        const pw = 750 //设计稿宽度 2倍图
        let vw = docEle.clientWidth //屏幕宽度
        if (vw < 320) {//最小零界点
            vw = 320
        }
        if (vw > 600) {//最大零界点
            vw = 600
        }
        docEle.style.fontSize = vw/pw * 100 + 'px' //以750为基准宽度，屏幕宽为750px时设置html的字体大小为100px，其他子元素字体大小按:设计图大小/100 设置
    }
    setHtmlFontSize()
    window.addEventListener('resize', function(){
        setHtmlFontSize()
    })

　　body{font-size: 0.4rem} //设计图大小：40px 网页显示大小：20px

cal+rem组合方式：没有零界值设置，但是也可以配合，media设置零界值

html{
        font-size: calc(100vw / 750 * 100);
    } 
    @media (max-width: 319px){
        html{
            font-size: calc(320px / 750 * 100);
        }
    }
    @media (min-width: 601px){
        html{
            font-size: calc(600px / 750 * 100);
        }        
    }

body{font-size: 0.4rem}

media+rem组合方式：媒体查询就是根据不同的屏幕宽度设置合适的字体大小

html{
         font-size: 16px;
     }

    @media (max-width: 319px){
        html{
            font-size: 14px;
        }
    }
    @media (min-width: 601px){
        html{
            font-size:20px;
        }        
    }

body{font-size: 0.4rem}

4、vh：相对屏幕高度，100vh表示屏幕总高度，1vh为1%的屏幕高度

5、vw：相对屏幕宽度，100vw表示屏幕总宽度，1vw为1%的屏幕宽度