부트 스트랩의 반응 형 디자인을 보는 방법

부트 스트랩 반응 형 디자인은 CSS 미디어 쿼리를 통해 다양한 화면 크기에 대한 페이지의 디스플레이 효과를 자동으로 조정합니다. 화면 크기의 일련의 중단 점을 사전 정의했으며 화면 너비에 따라 다른 스타일을 동적으로 적용하여 페이지 적응을 달성했습니다.

부트 스트랩 반응 형 디자인의 미스터리 : 당신이 보는 것, 그리고 그것이 실제로하는 일

부트 스트랩 반응 형 디자인은 무뚝뚝하게 말하면 모든 크기의 화면에 웹 페이지를 아름답게 표시 할 수 있습니다. 그러나 이것은 어떻게 구현됩니까? 이 기사를 읽은 후에는 원칙을 이해할뿐만 아니라 일반적인 함정을 피할 수 있습니다.

코드를 먼저 읽기 위해 서두르지 말고 휴대 전화를 사용하여 웹 페이지를 볼 때의 기분에 대해 생각하십시오. 화면은 작고 내용이 압박되고 사진이 줄어들면 완전히 볼 수 없습니다. 부트 스트랩이하는 일은 이러한 사소한 것들을 자동으로 다루는 데 도움이되는 것입니다. CSS 미디어 쿼리를 통해이 마법을 구현합니다. 미디어 쿼리는 화면 크기에 따라 다양한 CSS 스타일을 자동으로 전환하는 스마트 스위치와 같습니다. 복잡한 JavaScript를 작성하지는 않지만 다양한 장치에 자동으로 적응할 수 있습니다. 이것은 반응 형 디자인의 매력입니다.

결국 미디어 쿼리는 화면 너비, 높이, 해상도 등과 같은 정보를 판단한 다음 다른 스타일을 선택적으로 적용하는 CSS 코드입니다. 부트 스트랩은이 메커니즘을 영리하게 활용하여 다른 화면 크기의 일련의 스타일을 사전 정의했습니다.

이 코드를 살펴보십시오.

 <code class="css">@media (max-width: 768px) { .container { max-width: 720px; /* 调整容器宽度*/ } .my-image { width: 100%; /* 图片占满宽度*/ } }</code>

이 코드의 의미는 다음과 같습니다. 화면 너비가 768 픽셀보다 작거나 같을 때 컨테이너의 최대 너비는 720 픽셀이며 이미지 너비는 자동으로 100%로 조정되므로 이미지가 더 작은 화면에 완전히 표시 될 수 있습니다. 당신이 보는 것은 페이지가 자동으로 조정되지만 그 뒤에 부트 스트랩은 미디어 쿼리 결과에 따라 다양한 스타일을 동적으로 적용한다는 것입니다.

Bootstrap은 각각 다른 화면 너비 범위에 해당하는 xs , sm , md , lg 및 xl 과 같은 여러 중단 점을 사전 설정합니다. 이 중단 점 뒤에는 다양한 크기의 스크린에서 스타일을 제어하는 ​​일련의 미디어 쿼리가 있습니다. 부트 스트랩 문서에서 이러한 중단 점에 대한 특정 값을 찾을 수 있습니다.

물론 부트 스트랩의 반응 형 디자인은 완벽하지 않습니다. 때로는 실제 상황에 따라 부트 스트랩의 기본 스타일을 조정하거나 페이지를 미세 조정하기 위해 일부 미디어 쿼리를 추가해야 할 수도 있습니다. 예를 들어, 중단 점에서 특정 요소에 대한 특별한 스타일을 설정해야 할 수도 있고 CSS를 직접 작성해야합니다.

또한 Bootstrap의 기본 스타일에 대한 과도한 관계는 페이지의 개성이 부족할 수 있습니다. 부트 스트랩 메커니즘 이해를 기반으로 자신의 설계 요구에 따라 적절한 수정 및 조정을하는 것이 좋습니다.

마지막으로, 매우 중요한 점 : 코드의 가독성과 유지 관리를 무시하지 마십시오. CSS를 작성할 때는 좋은 이름 지정 습관을 유지하고 향후 수정 및 유지 보수를 용이하게하기 위해 필요한 의견을 추가해야합니다. 이것은 작은 문제가 아닙니다. 혼란스러운 CSS 코드베이스는 디버깅 및 수정할 때 미치게됩니다. 나를 믿으십시오. 나는 코드 사양에주의를 기울이지 않았기 때문에 숨겨진 버그를 찾는 데 몇 시간을 소비했습니다.

Bootstrap의 반응 형 디자인을 이해하려면 사용 방법을 알고 있어야 할뿐만 아니라 유연하게 사용하고 일반적인 함정에 빠지지 않도록 원리를 이해해야합니다. 만병 통치약이 아닌 도구라는 것을 기억하십시오. 그것을 통제하는 법을 배우는 것만으로는 진정으로 그 역할을 할 수 있습니다.

위 내용은 부트 스트랩의 반응 형 디자인을 보는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!