• 前端架构师之路03_移动端规范兼容处理

    1 移动端页面制作规范

    在这里插入图片描述

    1.1 计量单位的使用

    CSS 的计量单位选择

    • px：固定的像素值
    • em：相对父级元素的 font-size 设置来作为当前元素 1em 所代表的像素值，如父节点的 font-size:10px，当前节点的 font-size:1.2em，则当前节点的 font-size 实为 12px
    • rem：相对根节点 html 的 font-size 设置来作为当前元素 1rem 所代表的像素值，与 em 的区别就是 rem 的基本度量单位与父节点无关，只与根节点 font-size 的设置有关，如设置 html{font-size:10px;} 后当前 dom 所有节点的 1rem 都表示 10px
    • vm/vh：表示视区宽度/高度，视区总宽度为 100vw，总高度为 100vh

    移动端开发中我们使用 rem 作为基本计量单位，同时将根节点默认字号大小设为 font-size:62.5%，因移动端浏览器默认字号大小为 16px，16*62.5% 刚好为 10px

    html {
    /* 相当于 10px */
    font-size: 62.5%;
}

/* #example 的字体大小为 12px*/
#example {
    font-size: 1.2rem
}

/* #example 子节点 div 的字体大小为 14px;宽度为 100px;高度 100px */
#example div {
    font-size: 1.4rem;
    width: 10rem;
    height: 10rem
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 安卓下