不一样移动设备的响应式布局demo
概述：
能够实现根据不一样分辨率的设备，来动态改变图片大小，字体大小，输入框大小，盒子间距…javascript
关键技术点：css
- 相对长度单位rem，vw
- window.devicePixelRatio
- meta name=“viewport” content=“width=device-width, initial-scale=0.5”
<DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=0.5"> <title>移动设备屏幕分辨率适配</title> <style> *{ margin: 0; padding: 0; } span{ display: inline-block; font-size: 0.32rem; margin-top: 2vw; } .search_input{ width: 100%; padding: 2.5vw; border: 3vw solid red; font-size: 0.37rem; text-align: center; color: #999; } .list{ display: flex; flex-wrap: wrap; justify-content: space-evenly; } .item{ width: 44vw; height: 44vw; background: #ccc; margin-top: 3vw; list-style: none; } .box{ text-align: center; } </style> </head> <body> <div class='search'> <input type="text" placeholder="请输入商品名" class="search_input"> </div> <div class="product_list"> <ul class="list"> <div class="box"> <li class="item"></li> <span>商品1</span> </div> <div class="box"> <li class="item"></li> <span>商品2</span> </div> <div class="box"> <li class="item"></li> <span>商品3</span> </div> <div class="box"> <li class="item"></li> <span>商品4</span> </div> <div class="box"> <li class="item"></li> <span>商品5</span> </div> <div class="box"> <li class="item"></li> <span>商品6</span> </div> <div class="box"> <li class="item"></li> <span>商品7</span> </div> <div class="box"> <li class="item"></li> <span>商品8</span> </div> </ul> </div> <script> window.onload = function() { setRootFontSize(); setScaleFactor(); } window.addEventListener('resize', function () { setRootFontSize(); setScaleFactor(); }) function getDeviceWidth() { return window.innerWidth; } function getDpr() { return window.devicePixelRatio; } function setRootFontSize() { var deviceWidth = getDeviceWidth(); document.documentElement.style.fontSize = deviceWidth / 10 + 'px'; } function setScaleFactor() { var dpr = getDpr(); document.getElementsByTagName('meta')[1].setAttribute('content', `width=device-width, initial-scale=${1 / dpr}`) } </script> </body> </html>
