pc视口

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title></title>
 6 </head>
 7 <body>
 8 <script>
 9     // 1. 获取物理像素
10     let screenWidth = window.screen.width;
11     let screenHeight = window.screen.height;
12     console.log('屏幕的物理宽度'+screenWidth);
13     console.log('屏幕的物理高度'+screenHeight);
14 
15 
16     // 2. 求出独立像素和物理像素比例
17     alert(window.devicePixelRatio);
18 </script>
19 </body>
20 </html>

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>视口</title>
 6     <style>
 7         body{
 8             padding: 0;
 9             margin: 0;
10         }
11 
12         /*
13          1.如果子元素确定具体的宽高值，当超出viewport的大小的时候，会出现滚动条
14          2.如果设置的宽度为100%,当子元素宽高大于父容器的时候，会自动换行
15          3.如果不想出现滚动条或者换行，可以将子元素设置为父容器的百分比
16          */
17         .viewport{
18             /*width: 1536px;*/
19             width: 100%;
20             height: 400px;
21             background-color: #ccc;
22         }
23 
24         .viewport .box{
25             box-sizing: border-box;
26            /* width: 400px;*/
27             width: 25%;
28             height: 200px;
29             line-height: 200px;
30             float: left;
31             background-color: red;
32             border-right: 2px solid #fff;
33         }
34     </style>
35 </head>
36 <body>
37    <div class="show">
38        <span class="width"></span>
39        <span class="height"></span>
40    </div>
41 
42    <div class="viewport">
43        <div class="box">内容1</div>
44        <div class="box">内容2</div>
45        <div class="box">内容3</div>
46        <div class="box">内容4</div>
47    </div>
48 <script src="js/zepto.js"></script>
49 <script>
50     let getSize = ()=>{
51         $('.width').text('PC端的视口的宽度:' + document.documentElement.clientWidth);
52         $('.height').text('PC端的视口的高度:' + document.documentElement.clientHeight);
53     };
54 
55     getSize()
56 </script>
57 </body>
58 </html>

pc端视口的概念

猜你喜欢