Javascript는 반응형 개발 예제 공유를 위해 rem을 사용합니다.-JS 튜토리얼-php.cn

Javascript는 반응형 개발 예제 공유를 위해 rem을 사용합니다.

小云云

풀어 주다： 2018-01-15 09:05:15

원래의

1844명이 탐색했습니다.

이 글에서는 반응형 개발을 위한 자바스크립트의 rem 활용을 주로 소개합니다. 편집자는 꽤 좋다고 생각해서 지금 공유하고 참고용으로 올려보겠습니다. 편집자를 따라 살펴보겠습니다. 모두에게 도움이 되기를 바랍니다.

어젯밤에 쇼핑몰의 컴퓨터 버전이 완성되었고, 오늘은 모바일 버전을 만들기 위해 서두르고 있습니다. 모바일 웹사이트를 만들 때 가장 먼저 떠오르는 것은 다양한 휴대폰의 폭에 적응하는 것입니다. 예전에 이런 웹사이트를 만들 때 아무 생각 없이 부트스트랩을 도입한 적이 있었습니다. 하지만 이전 프로젝트를 마친 후에는 부트스트랩이 좋지만 다양한 스타일을 거의 사용하지 않으며 레이아웃에 가장 많이 사용합니다. 공간이 많아서 이번에는 네이티브 글쓰기와 반응형 개발을 사용하고 싶습니다(지금도 조금 알고 있습니다).

1. 백분율 방법:

이름에서 알 수 있듯이 페이지 요소의 여백과 패딩, 너비, 높이 등은 모두 %를 사용하여 계산됩니다. CSS의 백분율은 무엇을 의미합니까? 모든 백분율은 무엇입니까? 이와 같이. 하위 요소의 너비가 50%인 경우 상위 요소의 너비는 100, 하위 요소의 왼쪽 패딩은 50%, 상위 요소의 너비는 100, 하위 여백 상단은 100입니다. 요소가 20%이면 상위 요소의 높이는 100입니다. 따라서 본문의 기본 너비는 화면 너비(PC의 브라우저 너비를 나타냄)입니다. 이는 백분율(또는 지정된 크기)에 따라 배치될 수 있습니다. 이는 단순한 레이아웃의 페이지에만 적합합니다. 복잡한 페이지를 구현합니다.

2. 미디어 쿼리:

이것은 CSS3에 나와 있습니다. 우리가 해결하려는 문제는 이 문제를 해결하기 위해 탄생한 미디어 쿼리입니다. 다양한 미디어는 다양한 CSS 스타일을 설정합니다. 여기서 "미디어"에는 페이지 크기, 기기 화면 크기 등이 포함됩니다. 가장 일반적으로 사용되는 형식은

phone: @media screen 및 (max-width: 767px) {/style in mobilephone/입니다. }

pad : @media screen and (max-width: 991px) and (min-width: 768) {/태블릿 스타일/}

pc: @media screen and (min-width: 992px){/컴퓨터 스타일/ }

...(더 많은 노드를 설정할 수도 있습니다)

미디어 쿼리를 사용하는 경우 각 픽셀 아래에 해당 적응 효과가 있는지 확인해야 합니다. 당연히 더 작은 너비 범위를 설정해야 합니다.

3 그리고 CSS3의 단위는 rem입니다.

rem은 루트 노드 html의 글꼴 크기 값을 전체 페이지의 기본 크기로 사용하는 것입니다. :10px"> 그렇다면 1rem=10px; 어떻게 적응해야 할까요? 그런 다음 페이지가 로드될 때 js를 사용하여 창 너비(브라우저 창 너비) $(window).width()를 가져와야 합니다. 모바일 페이지를 개발할 때 일반적으로 최대 너비를 640px로 설정합니다. 현재까지 가장 넓은 휴대폰에 표시할 때 웹 페이지의 양쪽 끝이 화면에 딱 맞습니다. 작은 예를 들어 보겠습니다.

화면 확대의 세 p도 같은 줄에 있습니다.

html

<p class="container">
  <p class="box">1</p>
  <p class="box">2</p>
  <p class="box">3</p>
</p>

로그인 후 복사

css

<style>
  html{font-size: 20px;}
  .container{
    max-width: 640px;
    border:1px solid red;
    margin:0 auto;
    overflow: hidden;
    box-sizing: border-box;
  }
  .box{
    float: left;
    width:10.6rem;
    //我这里设置html的font-size:20px;最大
宽为640px,即相当于640/20=32rem;一行有3个p，所以每个p宽10.6rem

你也可以像论坛里面讲的那样设置html的font-size：62.5%;因为浏览器默认像素16px;乘以62.5%之后为整数10px;方便计算

    height:10.6rem;
    border:1px solid #000;
    box-sizing: border-box;
  }
</style>

로그인 후 복사

<script>
 window.onresize = window.onload = function () {
   var w = $(window).width();
   if(w<640){
     var size = 20*w/640;//640的时候
对应html的font-size为20，那么宽度为w是对应
的font-size可这么求
     $(&#39;html&#39;).css(&#39;fontSize&#39;,size+&#39;px&#39;);
   }
 }
</script>

로그인 후 복사

작은 구덩이, 언제 확인을 위해 이 작은 데모를 Google Chrome으로 가져가면 처음에 브라우저 창이 축소됨에 따라 세 개의 p가 줄어들고 특정 값에 도달한 후에는 움직이지 않는다는 것을 알게 될 것입니다. 그 이유는 Google Chrome이 기본적으로 브라우저를 지원하기 때문입니다. html의 최소 글꼴 크기 값은 10px입니다. 이 값보다 작으면 작아지지 않습니다. 이것은 제가 당시 인터넷에서 거의 2시간 동안 검색하면서 겪은 문제입니다. 그래도 결국은 그런 비인간적인 이유를 발견했습니다.