关于移动端html设置font-size: 13.33vw的传说解释~~~~~

最新推荐文章于 2024-09-03 11:34:18 发布

chi1130

最新推荐文章于 2024-09-03 11:34:18 发布

阅读量8.9k

点赞数 5

分类专栏： bootstrap 文章标签： css 移动端

本文链接：https://blog.csdn.net/chi1130/article/details/82844489

版权

bootstrap 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

前几天看了下网易官网 https://3g.163.com/touch/#/，切到移动端视图，发现：

它的css写的是13.33vw；

再看看css文件，又发现：

依然写的都是13.33vw，那这个13.33是怎么来的呢？

如果你了解设计稿你就懂了，其实很简单：

首先要先说明：移动端的设计稿一般是width：750px，height：auto（这里指的是不确定），100vw = 100%，这个也没有问题吧；那么，设计稿拿过来，我们可以得出：750px = 100vw，这个也没有问题吧，那么1px等于多少vw呢？是不是 1px = 100 / 750 vw = 0.13333vw；那么100px = 多少vw呢，这个应该知道了吧。100px = 13.33vw；

思路过程：

mobile.width = 750px => 750px = 100% =100vw => 750px = 100vw => 1px = 0.1333vw => 100px = 13.33vw => 1rem =100px;

即：我们把html:{font-size: 13.33vw} // 也就是以100px位基准；1rem = 100px;

现在就好算多了；移动端的尺寸 / 100 = XXX rem；

另外这个简单的js也能做出这样的效果

(function (window, document) {
      var getRem = function () {
        if (document) {
          var html = document.documentElement;
          var hWidth = (html.getBoundingClientRect().width) * (750 / 352);
          console.log(hWidth)
          html.style.fontSize = hWidth / 16 + "px";
          console.log(html.style.fontSize)
        }
      };
      getRem();
      window.onresize = function () {
        getRem();
      }
    })(window, document)