前端基础进阶6

前端基础进阶

长度单位

  • vw / vh

    • 使用vw单位设置网页元素的尺寸

    • 相对单位

    • 相对视口的尺寸计算结果

    • vw：viewport width

      • 1vw = 1/100视口宽度

    • vh：viewport height

      • 1vh = 1/100视口高度


    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>体验vw和vhtitle>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
    ?
            /* 1. vw = 1/100视口宽度 */
            /* .box {
                width: 50vw;
                height: 30vw;
                
            } */
    ?
            /* 2. vh = 1/100视口高度 */
            .box {
                width: 50vh;
                height: 30vh;
                background-color: pink;
            }
        style>
    head>
    <body>
        <div class="box">div>
    body>
    html>

  • vw适配原理

    • 实现在不同宽度的设备中，网页元素尺寸等比缩放效果

    • vw单位尺寸

      • 1、确定设计稿对应的vw尺寸 （1/100视口宽度）

        • 查看设计稿宽度 → 确定参考设备宽度 (视口宽度) → 确定vw尺寸 （1/100 视口宽度）

      • 2、vw单位的尺寸 = px单位数值 / ( 1/100 视口宽度 )

    • vh单位尺寸

      • 1、确定设计稿对应的vh尺寸 （1/100视口高度）

        • 查看设计稿宽度 → 确定参考设备高度 (视口高度) → 确定vh尺寸 （1/100 视口高度）

      • 2、vh单位的尺寸 = px单位数值 / ( 1/100 视口高度 )

    • 思考：开发中，会不会vw和vh混用呢？

      • 不会。

      • vh是1/100视口高度，全面屏视口高度尺寸大，如果混用可能会导致盒子变形。

  • rem 和 vw / vh 的区别

     

移动web

相关

移动web_平面转换

标签