liaooo

标签： 视口

  • vw与vh

    vw和vh单位是相对于视口的尺寸所计算的结果

    • vw（viewport width）
      • 1vw = 视口宽度的 1%
    • vh（viewport height）
      • 1vh = 视口高度的 1%

    vw单位的适配：

    • 确定设计稿的宽度（视口的宽度），得到 1vw = 视口宽度的1%
    • vw单位的尺寸 = px / 1vw = px / 视口的宽度的1%

    vh单位的适配：

    • 确定设计稿的高度（视口的高度），得到 1vh = 视口高度的1%
    • vh单位的尺寸 = px / 1vh = px / 视口高度的1%
    例如：

    此时视口宽度1920px 高度1080px

    1vw = 1920px / 100 = 19.2 px

    1vh = 1080px / 100 = 10.8px

  • 视口

    视口 viewport

    meta标签的设置视口

    通过meta标签可以进行视口的设置

    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    属性解释说明
    width设置视口的宽度，device-width表示当前设备的宽度
    user-scalable设置用户是否可以缩放，yes/no
    initial-scale初识缩放比
    maximum-scale最大缩放比
    minimum-scale最小缩放比

    之后开发专门针对于移动端网页时，一般都需要加上以上meta标签，这算是移动web的第一个注意点。