关于前端代码移动端的适配方案

麻花痒  金牌会员 | 2024-9-10 05:41:26 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 552|帖子 552|积分 1656

为什么须要适配？

        由于PC端和移动端的分辨率不同，前端展示的页面在两头设备假如原模原样的搬运则会导致PC端或移动端看到的画面相对于其设备的分辨率及其的不合理。
        最为常见的是PC端正常浏览的网页没有做移动端适配，由于移动端分辨率普遍低于PC端，导致移动端打开后须要通过拖沓才能看到完备的网页内容
        以上就是为什么须要做适配的缘故原由，较好的案例有：京东、新浪微博等
适配方案

适配方案有如下几种：


  • 宽度适配：宽度自适应

    • 百分比布局
    • Flex布局

  • 等比适配：宽高等比缩放

    • rem
    • vm

宽度适配

        宽度适配很好理解，举一个例子：我的电脑分辨率是2560*1600像素，那么我打开一个网页，网页的宽度就是我电脑分辨率的宽度2560像素（实际网页右边会有滚动条及其他内容，以是网页的实际宽度<2560）
        实现宽度适配通常使用百分比布局和Flex布局，下面用京东底部导航栏作为示例：
        这是在iPhone 6/7/8下京东导航栏首页li元素的像素大小93.83*50

        这是在iPhone 6/7/8 Plus下京东导航栏首页li元素的像素大小103.5*50

        在分辨率不同的设备中，li标签的宽度也会发生对应的厘革，但是高度并没有厘革，那么高度没厘革会带来什么影响呢？
        高度没厘革带来的影响最重要的是img元素不能实现大小的厘革，比方京东的图标，假设在iPhone6上的大小是80*80，那么在iPhone6 Plus上通过宽度适配只能实现宽度变大，而高度稳定，那么这是我们想要的效果吗？显然不是，以是宽度适配一样平常只用于PC端，而移动端则须要使用等比适配
附：宽度适配案例代码：
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>京东</title>
  8.     <style>
  9.       * {
  10.         margin: 0;
  11.         padding: 0;
  12.       }
  14.       li {
  15.         list-style: none;
  16.       }
  17.       
  18.       .toolbar {
  19.         position: fixed;
  20.         left: 0;
  21.         bottom: 0;
  22.         width: 100%;
  23.         height: 50px;
  24.         background-color: pink;
  25.       }
  27.       .toolbar ul {
  28.         display: flex;
  29.       }
  31.       .toolbar li {
  32.         width: 25%;
  33.         height: 50px;
  34.         text-align: center;
  35.       }
  37.       .toolbar img {
  38.         height: 50px;
  39.       }
  40.     </style>
  41.   </head>
  43.   <body>
  44.     <div class="toolbar">
  45.       <ul>
  46.         <li>
  47.           <a href="#"><img src="./images/index.png" alt="" /></a>
  48.         </li>
  49.         <li>
  50.           <a href="#"><img src="./images/classify.png" alt="" /></a>
  51.         </li>
  52.         <li>
  53.           <a href="#"><img src="./images/car.png" alt="" /></a>
  54.         </li>
  55.         <li>
  56.           <a href="#"><img src="./images/login.png" alt="" /></a>
  57.         </li>
  58.       </ul>
  59.     </div>
  60.   </body>
  61. </html>
复制代码
等比适配

rem



  • rem单位，是相对单位
  • rem单位是相对于HTML标签的字号计算效果
  • 1rem=1HTML字号大小
        既然rem和HTML字号大小挂钩，那么我们起首须要设置HTML字号大小才能使用rem作为单位，在此之前我们须要想想HTML字号大小如何设置？须要思索的问题重要有以下两点：


  • 1、手机屏幕大小不同，分辨率不同，如何设置不同的HTML标具名号？

    • 办理：媒体查询

  • 2、设备宽度不同，HTML把标具名号设置多少合适？

    • 办理：设备宽度大，元素尺寸大；设备宽度小，元素尺寸小

   媒体查询

          起首我们办理第一个问题，这里须要使用媒体查询这个功能，媒体查询的功能重要如下：
  

  • 媒体查询能够检测视口的宽度，如何编写差异化的CSS样式
  • 当某个条件建立，执行对应的CSS样式
  媒体查询的写法如下：
  1. @media (媒体特性) {
  2.     选择器 {
  3.         CSS属性
  4.     }
  5. }
复制代码
假设我们要在视口宽度为375像素时，网页背景致显示绿色，压根如何用媒体查询实现呢？代码如下：
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <title>媒体查询</title>
  8.   <style>
  9.     /* 视口宽度是375，网页背景色是绿色 */
  10.     @media (width:375px) {
  11.       body {
  12.         background-color: green;
  13.       }
  14.     }
  15.   </style>
  16. </head>
  17. <body>
  18.   
  19. </body>
  20. </html>
复制代码
        须要注意的是，假如你的电脑设备缩放不是100%，那么打开HTML文件选择宽度为375像素的iPhone 6机型网页并不会显示绿色，由于电脑缩放会导致像素大小的厘革，这个问题后续可以通过JavaScript办理
    rem-flexible.js        

          如今我们办理第二个问题，HTML把标具名号设置多少合适？
          目前rem布局方案中，将网页等分成10份，HTML标签的字号为视口宽度的1/10
  比方：视口宽度为320px，根字号大小就设置为32px
          接下来我们分别为宽度为320px/375px/414px的三款机型进行rem适配，代码如下：
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>rem适配</title>
  8.     <style>
  9.       * {
  10.         margin: 0;
  11.         padding: 0;
  12.       }
  14.       /* 1. 使用媒体查询，给不同视口的屏幕设置不同的HTML字号 */
  15.        @media (width:320px) {
  16.         html {
  17.             font-size: 32px;
  18.         }
  19.       }
  20.       @media (width:375px) {
  21.         html {
  22.             font-size: 37.5px;
  23.         }
  24.       }
  25.       @media (width:414px) {
  26.         html {
  27.             font-size: 41.4px;
  28.         }
  29.       }
  31.       /* 2. 使用rem单位书写尺寸 */
  32.       .box {
  33.         width: 5rem;
  34.         height: 3rem;
  35.         background-color: pink;
  36.       }
  37.     </style>
  38.   </head>
  40.   <body>
  41.     <div class="box"></div>
  42.   </body>
  43. </html>
复制代码
        但是这样会发现一个问题，假如每个宽度的机型都须要我们写一个媒体查询的代码，那么不同宽度的机型太多了，我们岂非要挨个去写吗？要如何办理这个问题？
          我们须要用到rem-flexible.js，它是手淘开发出的一个用来适配移动端的js库，核心原理就是根据不同的视口宽度给网页中的html根节点设置不同的font-size，须要我们做的操作也很简单，只须要导入js文件即可，代码如下：
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>rem适配</title>
  8.     <style>
  9.       * {
  10.         margin: 0;
  11.         padding: 0;
  12.       }
  13.       /* 2. 使用rem单位书写尺寸 */
  14.       .box {
  15.         width: 5rem;
  16.         height: 3rem;
  17.         background-color: pink;
  18.       }
  19.     </style>
  20.   </head>
  22.   <body>
  23.     <div class="box"></div>
  25.     <script src="./js/flexible.js"></script>
  26.   </body>
  27. </html>
复制代码
是不是特殊简单？这就是CtrlCV工程师的魅力！
    less

  思索：
  

  • 工作中，书写代码的尺寸要参照设计稿尺寸，设计稿中是px还是rem？
  • 如何确定rem的数值？
  目标：假设设计师给出一份设计稿，里面的某个元素大小为68px*29px（目前设计师设计稿通常适配375px视口），计算68px是多少个rem？
          我们知道，假如用rem在网页中显示某个元素宽度为68px，这个68px是通过N*根字号得来的，也就是说：N*37.5=68，N就是我们须要求得rem了，N=68/37.5，如今rem的单位尺寸我们已经知道怎么求了：1.确定基准根字号：查看设计稿宽度->确定参考设备宽度（视口宽度）->确定基准根字号（1/10视口宽度）；2.rem单位的尺寸：rem单位的尺寸=px单位数值/基准根字号
          接下来我们用rem实如今网页中建立一个68*29像素的盒子，代码如下：
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <title>rem布局</title>
  8.   <style>
  9.     /* 68 * 29 */
  10.     div {
  11.       width: 1.813rem;
  12.       height: 0.773rem;
  13.       background-color: pink;
  14.     }
  15.   </style>
  16. </head>
  17. <body>
  18.   <div></div>
  20.   <script src="./js/flexible.js"></script>
  21. </body>
  22. </html>
复制代码
        如今又有一个问题了，假如每次rem单位的尺寸都要我们计算，如上代码中的1.813rem和0.773rem是不是很麻烦？这时候我们须要怎么办理呢？less就是办理这个问题最好的帮手
  less-简介

  

  • Less是一个CSS预处理器，Less文件后缀是.less。扩充了CSS语言，使CSS语言具备一定的逻辑性、计算能力
  • 注意：浏览器不辨认Less代码，目前阶段，网页要引入对应的CSS文件
  • VS Code插件：Easy LESS，生存less文件后自动生成对应的CSS文件
          我们第一步要做的是导入Easy LESS插件，然后新建一个.less文件，让我们先来体验一下less的方便性：
          以下为less文件代码：
  1. .father {
  2.   color: red;
  3.   width: (68 / 37.5rem);
  4.   .son {
  5.     height: (29 / 37.5rem);
  6.   }
  7. }
复制代码
        Ctrl+s生存后，会自动生成一个css文件，代码如下：
  1. .father {
  2.   color: red;
  3.   width: 1.81333333rem;
  4. }
  5. .father .son {
  6.   height: 0.77333333rem;
  7. }
复制代码
        可以看到，less直接帮我们计算出了rem的单位大小，省去了我们计算的过程，提升了效率，接下来我们对less的底子语法做一个相识
  less-使用

  

  • 解释

    • 单行解释

      • 语法：// 解释内容
      • 快捷键：ctrl + /

    • 块解释

      • 语法：/* 解释内容 */
      • 快捷键：Shift + Alt + A
      • 注意点：快捷键容易和别的冲突，可以自行设置修改


  • 运算

    • 加、减、乘直接书写计算表达式
    • 除法须要添加小括号或.

  接下来让我们对less的运算进行代码演示：
  1. .box {
  2.   width: 100 + 20px;
  3.   width: 100 - 80px;
  4.   width: 100 * 2px;
  6.   // 除法 / → (计算表达式) 或 ./ → 推荐（）
  7.   width: (68 / 37.5rem);
  8.   width: 29 ./ 37.5rem;
  10.   // 如果表达式有多个单位，最终css里面以第一个单位为准
  11.   height: (29px / 37.5rem);
  12. }
复制代码
        less还可以嵌套使用，可以让我们快速生成后代选择器，写法如下：
  1. .父级选择器 {
  2.     //父级样式
  3.     .子级选择器{
  4.         //子级样式           
  5.     }
  6. }
复制代码
        让我们打开VsCode进行代码演示：
          less文件代码如下：
  1. .father {
  2.   color: red;
  3.   .son {
  4.     width: 200px;
  5.     a {
  6.       color: green;
  7.       // & 表示的是当前选择器，代码写到谁的大括号里面就表示谁 → 不会生成后代选择器
  8.       // 应用：配合hover伪类或nth-child结构伪类使用
  9.       &:hover {
  10.         color: blue;
  11.       }
  12.     }
  14.     // a:hover {
  15.     //   color: orange;
  16.     // }
  18.    
  19.   }
  20. }
复制代码
        生成的css代码如下：
  1. .father {
  2.   color: red;
  3. }
  4. .father .son {
  5.   width: 200px;
  6. }
  7. .father .son a {
  8.   color: green;
  9. }
  10. .father .son a:hover {
  11.   color: blue;
  12. }
复制代码
        less还有变量概念，语法如下：
  

  • 界说：@变量名: 数据;
  • 使用：CSS属性: @变量名;
          代码示比方下：
  1. // 1. 定义变量
  2. @myColor: green;
  4. // 2. 使用变量
  5. div {
  6.   color: @myColor;
  7. }
  9. p {
  10.   background-color: @myColor;
  11. }
  13. a {
  14.   color: @myColor;
  15. }
复制代码
        以上就是less的底子语法了，末了我们看看less的导入和导出如何实现。
  

  • less导入

    • 语法：导入：@import "文件路径";
    • 提示：假如是less文件可以省略后缀

          less导入有什么作用呢？假设我们有一个页面，建立了3个less文件，分别为头部、中部、尾部样式，假如正常写法我们会生成3个CSS文件，假如将中部和尾部导入至头部，那么只须要生成1个CSS文件，也就是提升了简洁程度，以下为less导入写法：
  1. @import "./08-less-体验.less";
  2. @import "./09-less-注释";
复制代码


  • less导出

    • 语法：导出：在less文件的第一行添加 //out: 存储URL
    • 提示：文件夹名称后面添加/
    • 禁止导出：语法：在less文件的第一行添加 //out: false

          通常我们less文件生成的CSS文件，名称是和less文件名是一样的，假如我们想要让CSS名称不跟less文件一样须要如何操作呢？答案就是less导出，存储URL就是我们生成的CSS文件路径了，下面为三种导出的代码示例：
  1. // out: ./mycss/index.css
  3. // out: ./css/
  5. // out: ./index.css
复制代码
        禁止导出的作用又是什么呢？还是之前导入的例子，假如将中部和尾部导入至头部，那么只要头部生成CSS文件即可，中部和尾部自然须要禁止导出，避免产生3个CSS文件，假如我们遇到这种不须要生成CSS文件的less文件，则就可以使用禁止导出
  vw



  • 相对视口的尺寸计算效果
  • vw：viewport width

    • 1vw = 1/100视口宽度

  • vh：viewport height

    • 1vh = 1/100视口高度

        让我们简单的用代码体验以下vw和vh：
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>体验vw和vh</title>
  8.     <style>
  9.       * {
  10.         margin: 0;
  11.         padding: 0;
  12.       }
  14.       /* vw 和 vh 是相对视口宽高计算结果，可以直接实现移动端适配效果 */
  15.       /* .box {
  16.         width: 50vw;
  17.         height: 30vw;
  18.         background-color: pink;
  19.       } */
  21.       .box {
  22.         width: 50vh;
  23.         height: 30vh;
  24.         background-color: green;
  25.       }
  26.     </style>
  27.   </head>
  28.   <body>
  29.     <div class="box"></div>
  30.   </body>
  31. </html>
复制代码
        vw和vh并不须要使用到和rem一样的媒体查询之类的功能，相对而言更为方便
vw布局



  • 1、确定设计稿对应的vw尺寸（1/100视口宽度）：查看设计稿宽度->确定参考设备宽度(视口宽度)->确定vw尺寸（1/100视口宽度）
  • 2、vw单位的尺寸 = px单位数值 / (1 / 100视口宽度)
        vw和vh同样也可以使用less操作，下面做一个简单的代码示例：
  1. .box1 {
  2.    width: (68 / 3.75vw);
  3.    height: (29 / 3.75vw);
  4.    background-color: pink;
  5. }
  7. .box2 {
  8.   width: (68 / 6.67vh);
  9.   height: (29 / 6.67vh);
  10.   background-color: green;
  11. }
  13. // px单位尺寸 / 1/100视口的宽度或高度
复制代码


  • vh单位问题
  • 思索：开发中，能不能vw和vh混用呢？

    • 不能
    • vh是1/100视口高度，全面屏视口高度尺寸大，假如混用可能会导致盒子变形

        以上就是移动端适配的方案

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
回复

使用道具 举报

0 个回复

倒序浏览
返回列表

快速回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

麻花痒

金牌会员
这个人很懒什么都没写!

楼主热帖

标签云

挺好的 服务器
微信订阅号
微信服务号
微信客服
小程序
H5
关于我们 商务合作 网站地图
©Copyright 2022-2024 杭州祥升科技有限公司 版权所有 浙ICP备20004199号
快速回复 返回顶部 返回列表