不同移动设备的响应式布局demo

概述:
可以实现根据不同分辨率的设备,来动态改变图片大小,字体大小,输入框大小,盒子间距…

关键技术点:

  1. 相对长度单位rem,vw
  2. window.devicePixelRatio
  3. 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>商品1span>
               div>
               <div class="box">
                   <li class="item">li>
                   <span>商品2span>
               div>
               <div class="box">
                   <li class="item">li>
                   <span>商品3span>
               div>
               <div class="box">
                   <li class="item">li>
                   <span>商品4span>
               div>
               <div class="box">
                   <li class="item">li>
                   <span>商品5span>
               div>
               <div class="box">
                   <li class="item">li>
                   <span>商品6span>
               div>
               <div class="box">
                   <li class="item">li>
                   <span>商品7span>
               div>
               <div class="box">
                   <li class="item">li>
                   <span>商品8span>
               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>

不同移动设备的响应式布局demo_第1张图片

你可能感兴趣的:(CSS,HTML,rem,vw,响应式,scale)