标签：ati 滚动 百分比 滚动条 get float alert html margin
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端视口的概念
标签：ati 滚动 百分比 滚动条 get float alert html margin
原文地址：https://www.cnblogs.com/zhangzhengyang/p/11261594.html
