machinecat520
/
zj-Exercise


			
				
					
						
						
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758
							<!DOCTYPE html>
<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>04.视口</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box1{
            width: 100vw;
            height: 100px;
            background-color: #bfa;
        }

    </style>
</head>
<body>
    
    <!-- 
        不同的设备，完美视口的大小是不一样的
        比如：
            iPhone6---375
            iPhone6plus---414

        由于不同设备视口和像素比不同，所以同样的375个像素在不同的设备下意义是不一样，
            比如在iPhone6中，375就是全屏，而到了plus中375就会缺一块

        所以在移动端开发时，就不能再使用px来进行布局了

        vw  表示的是视口的宽度（viewport width）
            -100vw = 一个视口的宽度
            -1vw    = 1%视口宽度

            vw这个单位永远相对于视口宽度进行计算

            设计图的宽度
                750px   1125px
            
            设计图
                750px
            使用vw作为单位
                100vw

            创建一个 48×35 大小的元素
            100vw = 750px（设计图的像素）
            6.4vw = 48px（设计图的像素）100/750*48
            4.667vw = 35px  100/750*35

     -->

     <div class="box1"></div>

</body>
</html>