이 글에서는 반응형 개발을 위한 자바스크립트의 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>
<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可这么求 $('html').css('fontSize',size+'px'); } } </script>
vue-meta를 사용하여 헤더 태그를 관리하는 방법
Nuxt.js의 몇 가지 일반적인 문제(자세한 튜토리얼)
React Native 관련 도메인 간 리소스 오류 문제
in nodejs 최신 버전의 npm 설치(자세한 튜토리얼)
js에서 디바운스 기능을 구현하는 방법(자세한 튜토리얼)
vue-scroller에서 스크롤 위치를 표시하고 기록하는 방법
위 내용은 반응형 개발을 위해 자바스크립트 사용의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!