부트스트랩에서 적응형 높이를 구현하는 방법

부트스트랩에 대해 더 알고 싶다면 다음을 클릭하세요. 부트스트랩 튜토리얼

많은 사람들이 부트의 래스터 레이아웃을 사용하지만 높이를 비례적으로 제어하는 ​​방법을 모릅니다. 이 기사에서는 부트스트랩 프레임워크를 사용하여 프런트 엔드 페이지를 구축할 때 요소 높이의 적응형 레이아웃을 제어하는 ​​방법을 자세히 소개합니다.

먼저 페이지 헤드에 JS의 일부를 인용합니다.

js 코드 조각은 다음과 같습니다.

var iScale = 1;
iScale = iScale / window.devicePixelRatio;  
document.write(&#39;<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=&#39; + iScale + &#39;,minimum-scale=&#39; + iScale + &#39;,maximum-scale=&#39; + iScale + &#39;">&#39;) 
var iWidth = document.documentElement.clientWidth;
document.getElementsByTagName(&#39;html&#39;)[0].style.fontSize = iWidth / 16 + &#39;px&#39;;

참고: 문서가 로드되기 전에 도입되어야 합니다. 그렇지 않으면 적용되지 않습니다.

소개가 성공적으로 완료되면 문서 html 요소에 글꼴 크기 속성이 나타나는 것을 볼 수 있습니다.

두 번째는 CSS를 작성하려면 Less를 사용해야 한다는 것입니다. 가장 큰 이유는 Less에 계산 기능이 있기 때문입니다. Less 사용에 대한 자세한 내용은 Less 공식 웹사이트를 참조하세요.

간략한 계산 스타일 코드 조각:

@s:46.875rem;
@color:~"div[class^='col']";
@{color}{
    background: #999;
    height: 200/@s;
  }

위의 코드는 .color 클래스에 100픽셀의 높이가 추가된다는 의미입니다. 물론 200픽셀은 바로 200/@s입니다. 변수의 값은 고정되어 있지 않으며, 동적으로 계산된 글꼴 크기이며, 그 값의 크기는 실제 설계 도면의 크기를 기준으로 계산됩니다.

위 내용은 부트스트랩에서 적응형 높이를 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!