rem 절대 적응 솔루션 분석-JS 튜토리얼-php.cn

rem 절대 적응 솔루션 분석

一个新手

풀어 주다： 2017-10-12 10:40:40

원래의

1607명이 탐색했습니다.

rem

　css3에 추가된 rem은 현재 매우 인기 있는 단위입니다. MDN의 설명을 살펴보세요:

이 단위는 루트 요소의 font-size 大小（例如 <html> 요소의 글꼴 크기를 나타냅니다.

이 유닛을 사용하면 완벽하게 확장 가능한 레이아웃을 만들 수 있습니다. 페이지 크기에 따라 HTML의 글꼴 크기를 수정하면 전체 페이지에 적용됩니다. 그렇다면 문제는 HTML의 글꼴 크기를 적응형으로 만드는 방법입니다.

Media Query

　여기에서는 미디어의 사용법을 자세히 설명하지 않습니다. HTML의 글꼴 크기는 페이지 적응의 목적을 달성하기 위해 미디어 쿼리를 통해 수정된다는 점만 간략하게 설명하겠습니다.

　 html은 다음과 같습니다.

  <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>

로그인 후 복사

　 css는 다음과 같습니다.

//媒体查询控制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;
  }

로그인 후 복사

미디어 쿼리를 통해 html의 글꼴 크기는 다양한 크기 범위의 페이지에서 다르게 설정됩니다.

페이지 너비가 700px일 때 html의 글꼴 크기는 14px이며, 이때 1rem = 14px, li 요소의 글꼴 크기는 14px이고 패키지의 내부 여백도 14px로 페이지 너비를 800px로 변경합니다. html의 글꼴 크기는 16px이고 이때 1rem = 16px이면 li 요소의 글꼴 크기는 16px이 되고 패키지의 내부 여백도 16px이 됩니다. 쿼리가 분할될수록 적응성이 강해지지만 완전한 적응을 달성할 수 없으며 간격 기반일 뿐입니다.

　vw는 뷰포트의 1/100을 나타냅니다. 100vw는 뷰포트의 너비를 나타냅니다. 이를 사용하면 HTML의 완전히 적응 가능한 글꼴 크기를 얻을 수 있습니다.

css는 다음과 같습니다.

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

로그인 후 복사

　 예시의 768px는 가정된 표준값으로, 일반적으로 디자인 도안의 크기를 기준으로 적용합니다. 완전히 적응할 수 있도록 페이지 크기를 조정합니다.

JS 조정

페이지를 로드하고 창 크기를 조정할 때 HTML의 글꼴 크기를 설정하면 적응성의 목적이 달성되었습니다.

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

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

        doc.style.fontSize = scale * 16 + &#39;px&#39;;      }

      if (!doc.addEventListener) return;

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

로그인 후 복사

　1. 뷰포트 너비를 가져옵니다

　2. 뷰포트 너비 변경에 따라 HTML

의 글꼴 크기를 표준으로 설정합니다.

위 내용은 rem 절대 적응 솔루션 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!