移动适配rem方法—媒体查询—flexible.js框架—Less语法—实例模拟

本文链接：https://blog.csdn.net/qq_45708377/article/details/125996895

移动适配是为了保证在不同手机不同尺寸下图标也可以随之合适变换的情况
在这里插入图片描述

一.rem：目前多数企业在用的解决方案

1.rem是相对单位

在这里插入代码片 在这里插入图片描述

    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        /* 1rem = 1html标签字号大小 */
        html {
            font-size: 20px;
        }
        
        .box {
            width: 5rem;
            height: 3rem;
            background-color: pink;
        }

·······································································

<body>
    <div class="box"></div>
</body>

2.rem移动适配-媒体查询

媒体查询能够检测视口的宽度，然后编写差异化的CSS 样式
（1）解决 手机屏幕大小不同，分辨率不同，如何设置不同的HTML标签字号问题

在这里插入图片描述

   <style>
       /* 使用媒体查询, 根据不同的视口宽度, 设置不同的根字号 */
       /* 当窗口宽度为375px时，font-size就会为40px，如果不是375px，就不生效 */
       @media (width:375px) {
           html {
               font-size: 40px;
           }
       }
       /* 当窗口宽度为320px时，font-size就会为30px */
       @media (width:320px) {
           html {
               font-size: 30px;
           }
       }
   </style>

（2）解决设备宽度不同，HTML标签字号设置多少合适的问题

目前rem布局方案中，将网页等分成10份，HTML标签的字号为视口宽度的1/10

   /* 1. 不同的视口, HTML标签字号不同, 字号是视口宽度的1/10 */
   /*现在是可以在这三个宽度的设备上使用，并按照1/10的窗口比例*/
   @media (width:320px) {
       html {
           font-size: 32px;
       }
   }
   @media (width:375px) {
       html {
           font-size: 37.5px;
       }
   }
   @media (width:414px) {
       html {
           font-size: 41.4px;
       }
   }

     /* 2. 再书写盒子尺寸, 单位rem */
        .box {
            width: 5rem;
            height: 3rem;
            background-color: pink;
        }

（3）设计稿px与rem转换计算
在这里插入图片描述

CSS代码

/* 移动适配，当下只能在已写出的@media 中使用 */
/* 1. HTML标签加字号 1/10; 2. 写rem单位的尺寸 */
@media (width: 320px) {
    html {
        font-size: 32px;
    }
}
@media (width:375px) {
    html {
        font-size: 37.5px;
    }
}
@media (width: 414px) {
    html {
        font-size: 41.4px;
    }
} 

.box {
    /* 68 * 29 */
    /* width: 68px; */
    /* 一般的设计稿是375, HTML 37.5  根据设计稿计算68/37.5 */
    width: 1.813rem;
    height: 0.773rem;
    background-color: pink;
}

3.flexible.js框架

在这里插入图片描述
在html文件中放入

flexible.js文件代码块

(function flexible (window, document) {
  var docEl = document.documentElement
  var dpr = window.devicePixelRatio || 1

  // adjust body font size
  function setBodyFontSize () {
    if (document.body) {
      document.body.style.fontSize = (12 * dpr) + 'px'
    }
    else {
      document.addEventListener('DOMContentLoaded', setBodyFontSize)
    }
  }
  setBodyFontSize();

  // set 1rem = viewWidth / 10
  function setRemUnit () {
    var rem = docEl.clientWidth / 10
    docEl.style.fontSize = rem + 'px'
  }

  setRemUnit()

  // reset rem unit on page resize
  window.addEventListener('resize', setRemUnit)
  window.addEventListener('pageshow', function (e) {
    if (e.persisted) {
      setRemUnit()
    }
  })

  // detect 0.5px supports
  if (dpr >= 2) {
    var fakeBody = document.createElement('body')
    var testElement = document.createElement('div')
    testElement.style.border = '.5px solid transparent'
    fakeBody.appendChild(testElement)
    docEl.appendChild(fakeBody)
    if (testElement.offsetHeight === 1) {
      docEl.classList.add('hairlines')
    }
    docEl.removeChild(fakeBody)
  }
}(window, document))

在这里插入图片描述

4.Less语法

（1）简介

目标：使用Less语法快速编译生成CSS代码
*Less是一个CSS预处理器, Less文件后缀是.less
*扩充了CSS 语言, 使CSS具备一定的逻辑性、计算能力。
*注意：浏览器不识别Less代码，目前阶段，网页要引入对应的CSS文件。

在这里插入图片描述

（2）Less注释

在这里插入图片描述

（3）计算

在这里插入图片描述

Less文件

.box {
    width: 100 + 10px;
    width: 100 - 20px;
    width: 100 * 2px;

    // 除法
    // 68  > rem
    width: (68 / 37.5rem);
    // height: 29 ./ 37.5rem;

//注意除法下面这样写无效。在less4.0以前可以这样写，4.0以后就只支持上面两种了。
    height: 29 / 37.5rem;

}

保存自动生成↓↓↓

CSS文件

.box {
  width: 110px;
  width: 80px;
  width: 200px;
  width: 1.81333333rem;
  height: 29 / 37.5rem;
}

（4）嵌套

在这里插入图片描述

Less代码块
.father {
    width: 100px;
    .son {
        color: pink;
        // & 表示当前选择器,一般配合伪类用
        &:hover {
            color: green;
        }
    }

    &:hover {
        color: orange;
    }
}

保存自动生成↓↓↓

.father {
  width: 100px;
}
.father .son {
  color: pink;
}
.father .son:hover {
  color: green;
}
.father:hover {
  color: orange;
}

在这里插入图片描述

（5）变量

效率更高，更方便 在这里插入图片描述