移动WEB开发---用rem开发响应式设计

最新推荐文章于 2024-03-02 22:03:06 发布

刘翾

最新推荐文章于 2024-03-02 22:03:06 发布

阅读量522

点赞数

分类专栏： CSS 文章标签： rem响应式开发移动WEB rem与em区别

本文链接：https://blog.csdn.net/c_kite/article/details/78659997

版权

CSS 专栏收录该内容

10 篇文章 1 订阅

订阅专栏

效果

这里写图片描述

rem与em区别

先讲一个基础知识点
em是相对于其父元素来设置字体大小的，这样就会存在一个问题，进行任何元素设置，都有可能需要知道他父元素的大小，在我们多次使用时，就会带来无法预知的错误风险。而rem是相对于根元素<html>

代码

在每次浏览器大小变化时页面的html的font-size大小都会改变

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>rem</title>
  <style>
    body {
      font-size: 12px;
      margin: 0;
    }
    .btns {
      width: 10rem;
      margin: 0 auto;
    }
    .btns > a {
      float: left;
      width: 2.5rem;
      text-align: center;
      padding-top: 0.2rem;
      text-decoration: none;
    }
    .btns > a > i {
      display: inline-block;
      width: 1.2rem;
      height: 1.2rem;
      background: gray;
      border-radius: 50%;
    }
    .btns > a > span {
      display: block;
      line-height: 0.8rem;
      font-size: 14px;
    }
  </style>
  <script>
    (function () {
      //获取根元素, 即HTML
      let de = document.documentElement;
      //重置根元素字体大小
      function resetFontSize() {
        let w = de.getBoundingClientRect().width;//获取当前浏览器的宽度
        if (w > 640) w = 640;//设置一个最大宽度, 避免在ipad等设备过渡放大
        de.style.fontSize = (w / 10) + 'px';
      }
      //页面加载就位根元素字号赋值
      resetFontSize();
      //页面大小改变时, 重新设置根元素字号
      window.addEventListener('resize', resetFontSize, false);
    })();
  </script>
</head>
<body>
  <div class="btns">
    <a href="#"><span>1</span></a>
    <a href="#"><span>2</span></a>
    <a href="#"><span>3</span></a>
    <a href="#"><span>4</span></a>
    <a href="#"><span>5</span></a>
    <a href="#"><span>6</span></a>  
  </div>
</body>
</html>

若是习惯用px开发还可以采用sass和less这种css预编译语言, 如下代码所示

//页面刚开始加载时, 执行
var documentElement = document.documentElement;//获取html元素
documentElement.style.fontSize = documentElement.getBoundingClientRect() . width / 16 + 'px';//设置为视窗宽度的1/16

//xx.sass
@function px2rem($x) {
    @return $x / 40 * 1rem;//40是假如按640px的设计稿, 分成16等份,  每等份640/16 = 40px;
}

//这样就可以这样使用, 在编译的时候下面会自动转换为rem
.box {
    padding: px2rem(8);
}