반응형 개발을 위해 자바스크립트 사용

이 글에서는 반응형 개발을 위한 자바스크립트의 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. is also css3 rem의 단위:

rem은 루트 노드 html의 글꼴 크기 값을 전체 페이지의 기본 크기로 사용하는 것입니다. 예를 들어

화면 확대 및 축소도 3개의 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>

js

<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이 기본적으로 가장 작은 글꼴 크기를 지원하기 때문입니다. 값이 10px인데 이 값보다 작으면 더 이상 작아지지 않습니다. 이게 제가 당시에 겪었던 문제입니다. 인터넷에서 거의 2시간 동안 검색하고 별 생각 없이 반복해서 설명했습니다. 드디어 그런 비인간적인 이유를 발견했습니다.

위 내용은 제가 여러분을 위해 정리한 내용입니다. 앞으로 여러분에게 도움이 되길 바랍니다.

관련 기사:

vue-meta를 사용하여 헤더 태그를 관리하는 방법

Nuxt.js의 몇 가지 일반적인 문제(자세한 튜토리얼)

React Native 관련 도메인 간 리소스 오류 문제

in nodejs 최신 버전의 npm 설치(자세한 튜토리얼)

js에서 디바운스 기능을 구현하는 방법(자세한 튜토리얼)

vue-scroller에서 스크롤 위치를 표시하고 기록하는 방법

위 내용은 반응형 개발을 위해 자바스크립트 사용의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!