移动端适配

客官°小女子只卖身不卖艺 2022-08-31 01:46 427阅读 0赞

### 移动端适配 ###

*  一、移动端适配是什么？
 *  二、基本概念
 *   *  1.移动端设备视口
     *  2. 什么是rem?
 *  三、解决方案
 *   *  1. 调整视口
     *  2.编写媒体查询文件
     *  3. 完整项目
     *   *   *  1- html结构
             *  2- css样式文件
             *  3- 简单的js行为
 *  效果展示
 *   *   *  pc端：
         *  移动端：
 *  总结

--------------------

# 一、移动端适配是什么？ #

移动端Web页面，就是我们进场遇见的H5页面、手机页面、webview页面等；因为手机设备屏幕尺寸大小不同，做移动端的Web页面，需要考虑各种尺寸设备上的兼容性问题。针对这个问题而提出来的各种解决方案被称为移动端适配；

# 二、基本概念 #

## 1.移动端设备视口 ##

Viewpotr&Rem  
在移动端浏览器当中，存在着两种视口，  
1：设备视口（visual viewport）——也就是我们说的设备大小既设备高宽  
2：布局视口（layout viewport，默认宽度980px）——网页的真实宽度是多少  
二者的关系是：  
（visual viewport）= （layout viewport）\* scale（缩放比例）

## 2. 什么是rem? ##

1: rem（font size of the root element）是指相对于根元素的字体大小的单位。  
2：em（font size of the element）是指相对于父元素的字体大小的单位。  
em在浏览器中默认为16px，不会随浏览器尺寸变化。  
而rem可以理解为会随屏幕尺寸变化而发生改变的单位（可以理解为屏幕宽度百分比，或者vw）。  
在开发的时候，往往会因为尺寸改变导致页面元素位置，大小发生偏移，造成页面变形，而使用rem这类响应式的尺寸单位，则可根据页面的变化，自动按比例伸缩，常用作为移动端适配方案。  
————————————————

# 三、解决方案 #

## 1. 调整视口 ##

————————————————

## 2.编写媒体查询文件 ##

这个CSS文件也需要链接到HTML中，才能达到适配

/*Galaxy S5 landscape & portrait*/
    /*iphone 4 注意iphone5/SE的width是一样的 screen-width:320px*/
    /*兼容iphone5 screen-width:360px*/
    /*iphone 6/7/8 screen-width:375px*/
    @media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) { 
    /*iphoneX*/
    }
    /*iphone 6plus screen-width:414px*/
    @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) { 
    /*ipad等中等设备*/
    }
    html { 
    font-size: 16px;
    }
    @media screen and (min-width: 320px) { 
    html { 
      font-size: 16px;
    }
    }
    @media screen and (min-width: 360px) { 
    html { 
      font-size: 18px;
    }
    }
    @media screen and (min-width: 375px) { 
    html { 
      font-size: 18.75px;
    }
    }
    @media screen and (min-width: 384px) { 
    html { 
      font-size: 19.2px;
    }
    }
    @media screen and (min-width: 400px) { 
    html { 
      font-size: 20px;
    }
    }
    @media screen and (min-width: 414px) { 
    html { 
      font-size: 20.7px;
    }
    }
    @media screen and (min-width: 424px) { 
    html { 
      font-size: 21.2px;
    }
    }
    @media screen and (min-width: 480px) { 
    html { 
      font-size: 24px;
    }
    }
    @media screen and (min-width: 540px) { 
    html { 
      font-size: 27px;
    }
    }
    @media screen and (min-width: 720px) { 
    html { 
      font-size: 36px;
    }
    }
    @media screen and (min-width: 750px) { 
    html { 
      font-size: 37.5px;
    }
    }

————————————————

## 3. 完整项目 ##

#### 1- html结构 ####

<!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,user-scale=0,user-scalable=no">
           
        <link rel="stylesheet" href="./normalize-new.css">
        <link rel="stylesheet" href="./style.css">
    
        <title>Distribution_center</title>
    </head>
    
    <body>
        
        <header>
            <a href="#">
                <img src="images/cxx-Icon/left-icon.png" alt="">
            </a>
            <span>分销中心</span>
        </header>
        
        <div id="container">
            
            <div class="Backg-box">
                <img src="images/bg-distribution.png" alt="">
            </div>
            
            <div class="per-inf">
                <div class="user-profile">
                    <img class="userimg" src="images/cxx-Icon/head.jpg" alt="">
                    <div class="usertext">
                        <P class="firp"><span>安安</span></P>
                        <p class="secp">
                            <span>当前等级：<span class="nbman">达人</span></span>
                        </p>
                    </div>
                    <a href="#">
                        <img src="images/cxx-Icon/sigh-icon.png" alt="">
                    </a>
                </div>
                
                <div class="Revenue-list">
                    <ul>
                        <li class="firli">
                            <div>
                                <span class="alitmaxnum">10.00</span>
                                <p class="alitmax">今日收益(元)</p>
                            </div>
                            <div>
                                <span class="alitmaxnum">45.20</span>
                                <p class="alitmax">总收益(元)</p>
                            </div>
                        </li>
                        <li class="overlist">
                            <div>
                                <span>0</span>
                                <p>今日推广订单</p>
                            </div>
                            <div>
                                <span>0</span>
                                <p>累计推广订单</p>
                            </div>
                        </li>
                        <li class="overlist">
                            <div>
                                <span>0</span>
                                <p>今日新增用户</p>
                            </div>
                            <div>
                                <span>0</span>
                                <p>累计用户</p>
                            </div>
                        </li>
                        <li class="overlist">
                            <div>
                                <span>0</span>
                                <p>今日邀请新增</p>
                            </div>
                            <div>
                                <span>0</span>
                                <p>累计邀请</p>
                            </div>
                        </li>
                        <li class="endli">
                            <span class="blacktext">可提现金额(元)</span>
                            <span class="redmoney">99.99</span>
                            <a href="#" class="right-a"><img src="images/cxx-Icon/right-icon.png" alt=""></a>
                            <a href="javascript:show();" class="up-a" id="Contraction"><img src="images/cxx-Icon/uplit.png" alt=""></a>
                        </li>
                    </ul>
                </div>
    
            </div>
            
            <div class="extension">
                <div class="TGtitle">
                    <b>推广卖货</b>
                </div>
                <div class="TGbr">
                    <div class="onebr brbott ">
                        <div class="brright-bor">
                            <div>
                                <p><span class="larblack">推广商品</span> </p>
                                <p>佣金赚不停</p>
                            </div>
                            <div class="on-rigthimg">
                                <img src="Images/icon-distribution1.png" alt="sr">
                            </div>
                        </div>
    
                        <div>
                            <div>
                                <p><span class="larblack">分享平台</span> </p>
                                <p>别人点火锅你赚钱</p>
                            </div>
                            <div class="on-rigthimg">
                                <img src="Images/icon-distribution2.png" alt="sr">
                            </div>
                        </div>
                    </div>
    
                    <div class="onebr">
                        <div class="brright-bor">
                            <div>
                                <p><span class="larblack">邀请好友</span> </p>
                                <p>邀请达人赚佣金</p>
                            </div>
                            <div class="on-rigthimg">
                                <img src="Images/icon-distribution3.png" alt="sr">
                            </div>
                        </div>
                        <div>
                            <div>
                                <p><span class="larblack">新手教学</span> </p>
                                <p>教你赚取更多佣金</p>
                            </div>
                            <div class="on-rigthimg">
                                <img src="Images/icon-distribution4.png" alt="sr">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
    
        </div>
        
        <footer>
            <span>回到首页  |  个人中心</span>
        </footer>
           
        <script src="JavaScript/index.js"></script>
    </body>
    <br>
    </html>

————————————————

#### 2- css样式文件 ####

这里的CSS文件格式是经过Less转换后的，MoYu在编写样式时，使用的Less方法，不懂得同学可上网查询less哦，这里我就不过多讲解了。

* { 
      margin: 0;
      padding: 0;
    }
    html { 
      font-size: 37.5px;
    }
    body { 
      margin: 0 auto;
      width: 100%;
      font-family: -apple-system, Helvetica, sans-serif;
      color: #666;
      line-height: 1.5;
      background: #d6d6d6;
      max-width: 750px;
      min-width: 375px;
    }
    a { 
      text-decoration: none;
    }
    ul, li { 
      list-style: none;
    }
    /*  */
    header { 
      position: relative;
      height: 1.333333rem /* 50/37.5 */;
      width: 100%;
      line-height: 1.333333rem;
      font-size: 0.426667rem /* 16/37.5 */;
      font-weight: 550;
      text-align: center;
      background: #fff;
    }
    header a { 
      position: absolute;
      left: 0.4rem /* 15/37.5 */;
    }
    /*  */
    #container { 
      position: relative;
      height: 20.88rem /* 735/37.5 */;
      width: 100%;
      /*  */
      /*  */
      /*  */
    }
    #container .Backg-box { 
      position: absolute;
      left: 0;
      top: 0;
      height: 5.133333rem /* 192.5/37.5 */;
      width: 100%;
    }
    #container .Backg-box img { 
      width: 100%;
    }
    #container .per-inf { 
      position: absolute;
      left: 1.5%;
      top: 4rem /* 150/37.5 */;
      height: 10.88rem /* 408/37.5 */;
      width: 97%;
      background-color: #ffffff;
      border-radius: 0.346667rem /* 13/37.5 */;
    }
    #container .per-inf .user-profile { 
      position: relative;
      height: 2.266667rem /* 85/37.5 */;
      width: 100%;
      font-size: 0.426667rem /* 16/37.5 */;
      text-align: center;
    }
    #container .per-inf .user-profile .userimg { 
      position: absolute;
      top: -0.666667rem /* 25/37.5 */;
      left: 50%;
      transform: translateX(-50%);
      width: 1.333333rem /* 50/37.5 */;
      height: 1.333333rem /* 50/37.5 */;
      border-radius: 50%;
      border: 3px solid #ffffff;
    }
    #container .per-inf .user-profile .usertext { 
      position: absolute;
      top: 0.8rem /* 30/37.5 */;
      left: 50%;
      transform: translateX(-50%);
    }
    #container .per-inf .user-profile .usertext .firp { 
      font-weight: 600;
      font-size: 0.426667rem /* 16/37.5 */;
    }
    #container .per-inf .user-profile .usertext .secp { 
      font-weight: 400;
      font-size: 0.32rem /* 12/37.5 */;
    }
    #container .per-inf .user-profile .usertext .secp .nbman { 
      color: #ff4848;
    }
    #container .per-inf .user-profile a { 
      position: absolute;
      top: 0.32rem /* 12/37.5 */;
      right: 0.426667rem /* 16/37.5 */;
      height: 0.426667rem /* 16/37.5 */;
      width: 0.426667rem /* 16/37.5 */;
    }
    #container .per-inf .user-profile a img { 
      width: 100%;
    }
    #container .per-inf .Revenue-list { 
      box-sizing: border-box;
      padding: 0.213333rem /* 8/37.5 */;
      position: relative;
      height: 320px;
      width: 100%;
      font-size: 0.426667rem /* 16/37.5 */;
      text-align: center;
    }
    #container .per-inf .Revenue-list ul > li { 
      display: flex;
      justify-content: space-around;
      height: 1.6rem /* 60/37.5 */;
      width: 100%;
      border-bottom: 1px solid #cccccc;
      font-weight: 600;
      font-size: 0.426667rem /* 16/37.5 */;
    }
    #container .per-inf .Revenue-list ul > .firli { 
      height: 1.92rem /* 72/37.5 */;
    }
    #container .per-inf .Revenue-list ul > .firli .alitmaxnum { 
      font-size: 0.533333rem /* 20/37.5 */;
    }
    #container .per-inf .Revenue-list ul > .firli .alitmax { 
      font-size: 0.426667rem /* 16/37.5 */;
    }
    #container .per-inf .Revenue-list ul > .endli { 
      box-sizing: border-box;
      border-bottom: none;
      padding-top: 0.326667rem /* 16/37.5 */;
      position: relative;
      height: 1.733333rem /* 65/37.5 */;
      justify-content: space-between;
      font-size: 0.453333rem /* 17/37.5 */ /* 18/37.5 */ /* 18/37.5 */ /* 16/37.5 */ /* 20/37.5 */;
    }
    #container .per-inf .Revenue-list ul > .endli a { 
      position: absolute;
      width: 0.426667rem /* 16/37.5 */;
      height: 0.426667rem /* 16/37.5 */;
    }
    #container .per-inf .Revenue-list ul > .endli .up-a { 
      left: 50%;
      transform: translateX(-50%);
      bottom: 0.426667rem /* 16/37.5 */;
    }
    #container .per-inf .Revenue-list ul > .endli .right-a { 
      position: absolute;
      right: 0.133333rem /* 5/37.5 */;
      top: 0.3826667rem;
    }
    #container .per-inf .Revenue-list ul > .endli .redmoney { 
      position: absolute;
      right: 0.866667rem /* 10/37.5 */;
      color: red;
    }
    #container .extension { 
      width: 97%;
      position: relative;
      left: 1.5%;
      top: 15.2rem /* 570/37.5 */;
      box-sizing: border-box;
      padding: 0.213333rem /* 8/37.5 */;
      font-size: 0.426667rem /* 16/37.5 */;
      background: #ffffff;
      border-radius: 13px;
    }
    #container .extension .TGtitle { 
      padding-left: 5px;
      font-size: 0.533333rem /* 20/37.5 */;
      height: 1rem;
      border-bottom: 1px solid #b1b1b1;
    }
    #container .extension .TGbr { 
      width: 100%;
    }
    #container .extension .TGbr .onebr { 
      display: flex;
    }
    #container .extension .TGbr .brbott { 
      border-bottom: 1px solid #b1b1b1;
    }
    #container .extension .TGbr .brright-bor { 
      border-right: 1px solid #b1b1b1;
    }
    #container .extension .TGbr .onebr > div { 
      padding: 15px 5px;
      padding-right: 0.266667rem /* 10/37.5 */;
      width: 4.8rem /* 180/37.5 */;
      width: 9.48rem /* 355.5/37.5 */;
      height: 1.266667rem /* 40/37.5 */;
      display: flex;
      justify-content: space-between;
      font-size: 0.33333rem /* 14/37.5 */;
    }
    #container .extension .TGbr .onebr > div .on-rigthimg img { 
      width: 1.2rem;
    }
    #container .extension .TGbr .onebr > div .larblack { 
      display: block;
      margin-bottom: 0.1386667rem /* 7/37.5 */;
      font-size: 0.426667rem /* 16/37.5 */;
      font-weight: bolder;
    }
    /*  */
    footer { 
      position: relative;
      margin: 0 auto;
      margin-top: 0.3rem;
      margin-bottom: 0.3rem;
      font-size: 0.23333rem /* 14/37.5 */;
      text-align: center;
    }

————————————————

#### 3- 简单的js行为 ####

————————————————

# 效果展示 #

### pc端： ###

![在这里插入图片为描述][9c6d9d500252a8ccda5c6d334166fc13.png_pic_center]  
![在这里插入图片描述][185534adbe10946a04fab2c523d497c1.png_pic_center]

### 移动端： ###

![在这里插入图片描述][83c251ac143e3fb792e390218fa3c0e1.png_pic_center]  
![在这里插入图片描述][693bf871e0ade349b084c87e1b0cd7d0.png_pic_center]

![tKbqZMyiroR9Ydu.jpg][]

# 总结 #

在做移动端适配时，我们应该尽量不要写死父容器的高度，应该尽量去定义子元素或者子容器的高宽，用子元素来撑开父元素。这样操作的好处在于，当我们用到定位，或者有一些动态效果会改变容器的高宽时，能够让其自适应间距、边距（margin\\padding）等。 ————————————————————————————————————————————

[9c6d9d500252a8ccda5c6d334166fc13.png_pic_center]: /images/20220829/99d1e0f46eee48ed9c79e4b54918794d.png
[185534adbe10946a04fab2c523d497c1.png_pic_center]: /images/20220829/0d875baa574145e99b2f5534e0dea384.png
[83c251ac143e3fb792e390218fa3c0e1.png_pic_center]: /images/20220829/489e14dd1a41417b902a0db62aac592b.png
[693bf871e0ade349b084c87e1b0cd7d0.png_pic_center]: /images/20220829/86c4d470b659456098f36c0abb3a0b25.png
[tKbqZMyiroR9Ydu.jpg]: https://i.loli.net/2021/07/22/tKbqZMyiroR9Ydu.jpg