rem布局设置

jayce 发布于2019-08-30 13:16 / 2764人阅读

摘要：基本介绍全称，是一种相关参考坐标，即在根结点设置基本的字体大小一般是根，其他节点的所有的字体大小都是相对于根结点而已。示例随着屏幕的宽高的变化，动态设置节点的属性属性根据设计图的尺寸做相应的调整。

rem基本介绍

rem全称font size of the root element，是一种相关参考坐标，即在根结点设置基本的字体大小（一般是根html），其他节点的所有的字体大小都是相对于根结点（html）而已。

示例

随着屏幕的宽高的变化，动态设置html节点的fontSize属性. width属性根据设计图的尺寸做相应的调整。通过如下的方式，可以直接通过将设计图上的px值除以100即为当前的设置的元素属性值。

window.addEventListener("resize", this.setFontSize);
function setFontSize() {
    var designedWidth = this.props.width;
    let actualWidth = Math.min(450, $(window).width());
    document.documentElement.style.fontSize = actualWidth * 100 / designedWidth + "px";
}

其他

如果设计图的属性固定，不常变化，可以直接将如下代码设置在html中

(function (doc, win) {
      var docEl = doc.documentElement,
        resizeEvt = "orientationchange" in window ? "orientationchange" : "resize",
        recalc = function () {
          var clientWidth = docEl.clientWidth;
          if (!clientWidth) return;
          clientWidth = clientWidth>750?750:clientWidth;
          docEl.style.fontSize = Math.floor (100 * (clientWidth / 750)) + "px";
        };

      if (!doc.addEventListener) return;
      win.addEventListener(resizeEvt, recalc, false);
      doc.addEventListener("DOMContentLoaded", recalc, false);
    })(document, window);

私有云混合云 rem布局 listview布局设置标签布局显示设置 rem

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/115431.html

vw+rem移动端自适应布局

摘要：本文同步发布于我的个人博客上移动端自适应布局不管是面试还是工作过程中，移动端的布局都比较常见，而移动端适配方法也是多种多样。表示当前视口宽度的百分之一。同时在移动端，的兼容性还不错，完全可以直接使用。这样完成了一个简单好用的移动端布局了本文同步发布于我的个人博客上 - vw+rem移动端自适应布局不管是面试还是工作过程中，移动端的布局都比较常见，而移动端适配方法也是多种多样。一般来...

Little_XM 2019-08-30 11:09 评论0 收藏0
移动端rem布局的学习（基于自己写的一个网易云播放页面的思考）

摘要：最近在看关于移动端的响应式布局，其中涉及到比较多的就是大小属性的设置等等，今天自己就捋一捋的用法。然而万一不能用该怎么办啊，所以还是要学会自己写原生的页面布局，也就会有今天的这篇文章了。的使用是指相对于根元素的字体大小的单位。对于一个前端的初学者来说，首先要做好的事就是切页面了，切页面不得不说的就是布局了，布局的重要性不言而喻，为了良好的用户体验，提出了许多不一样的布局：响应式布局，...

wums 2019-08-21 17:36 评论0 收藏0
移动端rem布局的学习（基于自己写的一个网易云播放页面的思考）

摘要：最近在看关于移动端的响应式布局，其中涉及到比较多的就是大小属性的设置等等，今天自己就捋一捋的用法。然而万一不能用该怎么办啊，所以还是要学会自己写原生的页面布局，也就会有今天的这篇文章了。的使用是指相对于根元素的字体大小的单位。对于一个前端的初学者来说，首先要做好的事就是切页面了，切页面不得不说的就是布局了，布局的重要性不言而喻，为了良好的用户体验，提出了许多不一样的布局：响应式布局，...

he_xd 2019-08-29 13:48 评论0 收藏0
移动端自适应布局方案

摘要：背景现在工作中有超过一半的时间用于移动端项目的开发，包括嵌入页，微信页面和移动页。经过研究，我在公司的多个移动端项目使用了布局来解决移动端自适应布局的问题。简单的说它就是一个相对单位，布局是一个流行的解决移动端响应式布局的方案。背景现在工作中有超过一半的时间用于移动端项目的开发，包括app嵌入页，微信页面和移动wap页。开发移动端页面跟开发PC页面的一个大区别就是移动端对响应式布...

zacklee 2019-08-26 11:50 评论0 收藏0