使用less自动进行移动端rem适配计算

最新推荐文章于 2024-05-25 17:52:35 发布

UIEngineer

最新推荐文章于 2024-05-25 17:52:35 发布

阅读量6.1k

点赞数 1

分类专栏： webApp

本文链接：https://blog.csdn.net/zjsfdx/article/details/87858454

版权

webApp 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

在做移动端的时候，最主要的问题就是要做适配，通过我们都是通过rem，但是，rem和px需要我们去转换，在一个项目中前端尺寸每次都需要计算的时候，那就应该交给插件工具们，当然，如果你的项目是工程化的例如vue-cli，那可以选择postcss-pxtorem更为合适。

目录结构如下：
在这里插入图片描述

某宝rem适配文件flexible.js
看起来还不错，1rem=37.5px（苹果6下）

// JavaScript Document
(function flexible (window, document) {
    var docEl = document.documentElement;     //获取文档根节点并保存到变量docEl中(相当于获取到html对象)
    var dpr = window.devicePixelRatio || 1;   //获取像素比，如果window.devicePixelRatio为false是dpr为1，如果window.devicePixelRatio大于1，那么dpr赋值取大的数
  
    function setBodyFontSize () {
      if (document.body) { //获取到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))

在vs code上装个小小less插件
在这里插入图片描述
index.html代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>使用less自动进行移动端rem适配计算</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="./js/flexible.js"></script>
    <link rel="stylesheet" type="text/css" media="screen" href="./css/index.css" />
</head>
<body>
    <div class="centent"></div>
</body>
</html>

index.less:

.rem(@name,@px){
    @{name} : unit(@px / 75,rem);
}
*{
    margin: 0;
    padding: 0;
}
.centent{
    .rem(width,750);
    .rem(height,300);
    background: #ccc;
}

在这里插入图片描述

效果如下：
因为装了less插件，在less文件写好了保存下，同文件目录上会自动生成一个.css同名字的文件，直接引入这个文件即可使用。
在这里插入图片描述

UIEngineer

关注

1
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
使用less自动进行移动端rem适配计算

在做移动端的时候，最主要的问题就是要做适配，通过我们都是通过rem，但是，rem和px需要我们去转换，在一个项目中前端尺寸每次都需要计算的时候，那就应该交给插件工具们，当然，如果你的项目是工程化的例如vue-cli，那可以选择postcss-pxtorem更为合适。目录结构如下：某宝rem适配文件flexible.js看起来还不错，1rem=37.5px（苹果6下）// JavaScri...
复制链接

扫一扫