js에서 글꼴 크기를 일치시키고 계산하는 방법-JS 튜토리얼-php.cn

js에서 글꼴 크기를 일치시키고 계산하는 방법

php中世界最好的语言

풀어 주다： 2018-04-14 14:40:48

원래의

1892명이 탐색했습니다.

이번에는 js로 글꼴 크기를 일치시키고 계산하는 방법과 js로 글꼴 크기를 일치시키고 계산할 때 주의 사항에 대해 설명하겠습니다.

실제 개발 과정에서 다양한 너비와 높이 계산으로 인해 혼란을 겪는 경우가 많습니다. 특히 rem 계산 방법을 사용하는 적응형 레이아웃은 많은 프로그래머를 당황하게 합니다. 이런 문제를 해결하려면 js를 사용하여 화면 너비 변경을 모니터링하여 HTML 루트 요소인 글꼴 크기의 값을 변경할 수 있다고 생각합니다.

다음은 JavaScript 관련 구현 코드입니다.

(function (doc, win) {
  var docEl = doc.documentElement,
    resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
    recalc = function () {
      var clientWidth = docEl.clientWidth;
      if (!clientWidth) return;
      if(clientWidth>=640){
        docEl.style.fontSize = '100px';
      }else{
        docEl.style.fontSize = 100 * (clientWidth / 640) + 'px';
      }
    };
  if (!doc.addEventListener) return;
  win.addEventListener(resizeEvt, recalc, false);
  doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);

로그인 후 복사

이 코드는 640px를 기본 값으로 선택합니다. 왜 640을 선택합니까?

640px의 페이지 너비는 안전한 최대 너비로, 모바일 페이지 양쪽에 공백이 없도록 보장합니다. 여기서 px는 장치의 물리적 픽셀과 다른 CSS 논리 픽셀입니다. 아이폰과 같은 5는 Retina 레티나 스크린을 사용하고 있으며, 2px x 2px 장치 픽셀을 사용하여 1px x 1px CSS를 나타냅니다. 픽셀이므로 장치 픽셀 수는 640 x 1136px이고 CSS 논리 픽셀 수는 320 x 568px입니다.
그래서 모바일 페이지로 전환하려면 렌더링 너비를 640px로 조정해야 합니다.

예를 들어 페이지의 p 너비가 60이고 높이가 65인 경우 다음과 같이 스타일을 직접 작성할 수 있습니다.

{
  width:0.6rem;
  height:0.65rem
}

로그인 후 복사

브라우저 호환성

Rem은 CSS3에 새로 도입된 측정 단위입니다. 누구나 브라우저 지원에 대해 좌절감을 느끼고 걱정할 것입니다. 실제로 다음과 같은 지원되는 브라우저가 꽤 많다는 사실에 놀라지 마십시오. 파이어폭스 3.6+, 애플 사파리 5+, 구글 크롬, IE9+ 및 Opera11+. 불쌍한 IE6-8은 할 수 없기 때문에 그냥 투명하게 취급하십시오. 저는 항상 이랬습니다.

그러나 단위를 사용하여 글꼴을 설정하는 경우 IE를 완전히 무시할 수는 없습니다. 이 REM을 사용하고 싶지만 IE에서의 효과도 호환하려면 "px"와 "rem"을 함께 사용하고 " px"를 사용하여 이를 달성합니다. IE6-8에서 효과를 얻은 다음 "Rem"을 사용하여 브라우저의 효과를 얻습니다. Ie6-8이 텍스트 변경으로 변경되지 않도록 놔두세요. 누가 Ie6-8을 그렇게 오래되게 만들었나요? 시도하고 싶지 않다면 꽤 흥미로울 것입니다. 아마도 이것이 측정의 주류 단위가 될 것입니다.

전체 예제 코드:

<!DOCTYPE html>
<html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
   <meta content="telephone=no" name="format-detection" />
   <meta name="format-detection" content="email=no" />
   <meta http-equiv="Cache-Control" content="no-cache"/>
 <title>响应式布局</title>
 <style>
  html{font-size: 20px;width: 100%;height: 100%;}
  body{margin: 0;padding: 0;}
  header,footer{width: 100%;background: #17A578;color: #fff;font-size:1rem;text-align: center;line-height: 2rem;}
  .footer{position: fixed;bottom: 0;}
  .box{}
  .public{width: 5rem;height: 5rem;font-size: 1.2rem;display: inline-block;text-align: center;color: #fff;line-height: 5rem;margin-top: 1rem;}
  .left{background: #f00;}
  .center{background: #048F74;}
  .right{background: #000;}
 </style>
 </head>
 <body>
 <header>页面头部</header>
 <p class="box">
  <p class="public left">左</p>
  <p class="public center">中</p>
  <p class="public right">右</p>
  <p class="public left">左</p>
  <p class="public center">中</p>
  <p class="public right">右</p>
 </p>
 <footer class="footer">页面底部</footer>
  <script>
    //orientationchange方向改变事件
    (function (doc, win) {
     var docEl = doc.documentElement,//根元素html
     //判断窗口有没有orientationchange这个方法，有就赋值给一个变量，没有就返回resize方法。
      resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
      recalc = function () {
       var clientWidth = docEl.clientWidth;
       if (!clientWidth) return;
       //把document的fontSize大小设置成跟窗口成一定比例的大小，从而实现响应式效果。
       docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';
      };
      //alert(docEl)
     if (!doc.addEventListener) return;
     win.addEventListener(resizeEvt, recalc, false);//addEventListener事件方法接受三个参数：第一个是事件名称比如点击事件onclick，第二个是要执行的函数，第三个是布尔值
     doc.addEventListener('DOMContentLoaded', recalc, false)//绑定浏览器缩放与加载时间
    })(document, window);
    //alert(document.documentElement.clientWidth/320)
  </script>
 </body>
</html>

로그인 후 복사

이 기사의 사례를 읽은 후 방법을 마스터했다고 믿습니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!