rem absolute adaptive solution analysis

rem

The new rem in css3 is a very popular unit now. Take a look at the description on MDN:

This unit represents the font-size size of the root element (for example, the font-size of the 100db36a723c770d327fc0aef2ce13b1 element) .

Use this unit to create a perfect scalable layout. Just modify the font-size of the HTML according to the page size to adapt to the entire page. So the question is, how to make the font-size of HTML adaptive?

Media Query

I won’t go into details about the usage of media here. I will simply explain how to modify the font-size of HTML through media query to achieve the purpose of page adaptation.

The html is as follows:

##

  <article class="container">
    <ol>
      <li>rem是相对于root元素(html)字体大小的一个单位。 eg:html默认font-size为16px  则1rem = 16px</li>
      <li>若元素以rem为单位去设置字体、宽高、边距等。则修改html字体大小就能达到所有元素一起等比例修改的效果</li>
      <li>所以要实现html字体在不同页面大小下自适应</li>
    </ol>
  </article>

The css is as follows:

//媒体查询控制html字体大小 
 @media (max-width:767px) {
    html{
      font-size: 14px;
    }
  }
  @media (min-width:768px) {
    html{
      font-size: 16px;
    }
  }
  @media (min-width:992px) {
    html{
      font-size: 20px;
    }
  }

//页面元素的简单样式
  .container{
    padding: 1rem;
  }
  li{
    font-size: 1rem;
  }

Through media query, the font-size of HTML is set differently on pages with different size ranges;

When the page width is 700px, the font size of HTML is 14px, and at this time 1rem = 14px, the font size of the li element is 14px, and the inner margin of the package is also 14px; change the page width to 800px, and the font size of html is 16px. At this time, 1rem = 16px, the font size of the li element becomes 16px, and the inner margin of the package is 14px. The margin also changes to 16px;

In this way, of course, the more detailed the media query is, the stronger the adaptability will be, but it cannot achieve complete adaption, it is only interval-based.

vw

1/100 of the viewport represented by vw 100vw represents the width of the viewport. Using it, we can achieve fully adaptive font-size of html.

css is as follows:

  html{
    font-size: calc(16/768*100vw);   //以768时16px为标准进行缩放
  }

The 768px in the example is an assumed standard value. Generally, the size of the design draft is standard, and then Adapt again. Adjust the page size to be fully adaptive.

JS Adjustment

When loading the page and resizing the window, set the font size of the HTML to achieve the purpose of adaptability.

    (function(){
      var doc = document.documentElement,
          resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';

      function changeFontSize(){
        var clietWidth = doc.offsetWidth,
            scale = clietWidth/768;   //以768为标准

        doc.style.fontSize = scale * 16 + 'px';      }

      if (!doc.addEventListener) return;

      window.addEventListener(resizeEvt,changeFontSize)  //窗口大小变化或者手机横屏
      document.addEventListener('DOMContentLoaded',changeFontSize) //加载页面触发
    })()

1. Get the viewport width

2. Set the font-size of html

based on the change of the viewport width to the standard

The above is the detailed content of rem absolute adaptive solution analysis. For more information, please follow other related articles on the PHP Chinese website!