媒体查询(rem)配合less使用

屏幕宽度发生变化，页面元素的尺寸（宽度和高度）也随之变化，这样可以更好的达到适配效果，用户体验更好

百分比布局特点宽度自适应，高度固定

Flex布局更多的解决了盒子的排列方式，高度很难适配

所以都不能实现

需要配合 rem 单位设置元素的尺寸（宽度/高度）最终适配

那么什么是rem了?

rem是相对于HTML标签的字号计算结果 1rem = 1HTML字号大小(vw是视口宽度1%)

rem的使用场景：我们只需要修改html 的文字大小，就可以完成元素大小的等比例缩放

设置差异化CSS样式

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

使用flexible js配合rem实现在不同宽度的设备中，网页元素尺寸等比缩放效果

(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))
使用Less运算写法完成px单位到rem单位的转换
Less是一个CSS预处理器, Less文件后缀是.less
扩充了 CSS 语言, 使 CSS 具备一定的逻辑性、计算能力。
常见的预处理器还有 Sass、Stylus
注意：浏览器不识别Less代码，目前阶段，网页要引入对应的CSS文件。
加、减、乘直接书写计算表达式
除法需要添加 小括号 或 . 具体可以参看：less计算方式
注意： 表达式存在多个单位以第一个单位为准
 使用Less嵌套写法生成后代选择器
注意：&不生成后代选择器，表示当前选择器，通常配合伪类或伪元素使用
使用Less变量设置属性值
提前存储到一个容器，设置属性值为这个容器名
定义变量：@变量名: 值;
使用变量：CSS属性：@变量名;
同理如果我们以后设置一个设备是37.5的标准稿,要进行更换
  .go {
                    position: absolute;
                    left: (15 / @baseSize);
                    top: (-4 / @baseSize);
                    width: (69 / @baseSize);
                    height: (29 / @baseSize);
                    background: url(../images/status_active.png);
                    background-size: (68 / @baseSize);
                    font-size: (12 / @baseSize);
                    color: #fff;
                    text-align: center;
                    line-height: (29 / @baseSize);
使用Less导入写法引用其他Less文件
如base.less
// out:false
@charset 'UTF-8';
  // -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
body, ul, p, h3, h4, h5, h6 {
  padding: 0;
  margin: 0;
body {
  font-family: Arial, Helvetica, sans-serif;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  -webkit-user-select: none;
  user-select: none;
img {
  display: block;
  max-width: 100%;
  list-style-type: none;
  text-decoration: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
导入: @import “文件路径”;
使用Less语法导出CSS文件
方法一： 配置EasyLess插件， 实现所有Less有相同的导出路径 配置插件： 设置 → 搜索EasyLess → 在setting.json中编辑 → 添加代码（注意，必须是双引号）
    "workbench.iconTheme": "vscode-icons",
    "vsicons.dontShowNewVersionMessage": true,
    "editor.fontSize": 16,
    "liveServer.settings.CustomBrowser": "chrome",
    "[html]": {
        "editor.defaultFormatter": "vscode.html-language-features"
    "editor.wordWrap": "on",
    "editor.formatOnSave": true,
    "editor.formatOnPaste": true,
    "emmet.syntaxProfiles": {
        "html": {
            "inline_break": 2
    "security.workspace.trust.untrustedFiles": "open",
    "[css]": {
        "editor.defaultFormatter": "vscode.css-language-features"
    "files.autoSave": "afterDelay",
    "backgroundCover.imagePath": "c:\\Users\\顾伊\\Desktop\\wallhaven-57o568.png",
    "backgroundCover.opacity": 0.3,
    "less.compile": {
        "out": "../css/"
方法二：控制当前Less文件导出路径 Less文件第一行添加如下代码, 注意文件夹名称后面添加 /
禁止导出 在less文件第一行添加:  // out: false
最后是原图(●ˇ∀ˇ●)
        摸🐊选手
        13.6k