부트스트랩이 반응하나요?

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

반응형 웹 디자인이란 무엇인가요?

　반응형 웹 디자인은 사용자가 다양한 크기의 디바이스를 통해 웹 사이트를 탐색할 때 좋은 시각적 효과를 얻을 수 있도록 하는 방법입니다. 예를 들어, 먼저 컴퓨터 모니터에서 웹사이트를 탐색한 다음 스마트폰의 화면 크기는 컴퓨터 모니터보다 훨씬 작지만 둘의 사용자 경험은 거의 동일합니다. . 이는 웹사이트가 반응형 디자인에 있어 훌륭한 성과를 거두었음을 보여줍니다.

반응형 웹 디자인은 어떻게 작동하나요?

　반응형 웹 디자인을 적용하려면 다양한 기기 크기에 맞는 스타일이 포함된 CSS를 만들어야 합니다. 미디어 쿼리와 같은 다양한 글꼴과 웹 개발 기술을 사용하여 특정 장치에 페이지가 로드되면 장치의 뷰포트 크기가 먼저 감지되고 장치별 스타일이 로드됩니다.

반응형 웹 디자인을 위한 CSS에 대해 알아볼까요?

'bootstrap-반응형.css'를 공부하면서 '반응형 디자인'이 어떻게 뉘앙스를 구현하는지 배워보겠습니다. 그 전에 웹 페이지의 헤드 영역에 다음 코드 줄을 추가해야 합니다.

　뷰포트의 메타 태그는 기본 뷰포트를 재정의하고 특정 뷰포트와 관련된 스타일을 로드하는 데 도움이 됩니다.

　width 속성은 화면 너비를 설정합니다. 여기에는 320픽셀의 경우 320과 같은 값이 포함되어 있거나 브라우저에 기본 해상도를 사용하도록 지시하는 'device-width'가 포함되어 있습니다.

initial-scale 속성은 뷰포트의 초기 규모입니다. 1.0으로 설정하면 장치의 기본 너비가 렌더링됩니다.

물론 아래와 같이 Bootstrap의 반응형 CSS를 추가해야 합니다.

<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">

이제 반응형 CSS 파일을 찾으면 일부 공개 선언(10~22행) 뒤에 있는 것을 발견할 수 있습니다. '@media'로 시작하는 다양한 필드가 있습니다. 다양한 장치에서 작동하는 스타일을 작성하는 방법입니다.

　첫 번째 영역은 '@media (max-width: 480px)'로 시작하며 최대 너비가 480픽셀인 기기에 대한 스타일을 설정합니다. @media (max-width: 480px)' 开始，为最大宽度为 480 像素的设备设置样式。

　　第二个区域以 '@media (max-width: 767px)' 开始，为最大宽度为 767像素的设备设置样式。

　　第三个区域以 '@media (min-width: 768px) 和 (max-width: 979px)' 开始，为最小宽度为 768 像素和最大宽度为 979 像素的设备设置样式。

　　下一个区域是为最大宽度为 979 像素的设备设置样式。所以是以 '@media (max-width: 979px)' 开始。

　　最后两个区域分别以 '@media (min-width: 980px)' 和 '@media (min-width: 1200px)

　두 번째 영역은 '@media (max-width: 767px)'로 시작하며 최대 너비가 767픽셀인 기기의 스타일을 설정합니다.

　세 번째 영역은 '@media (min-width: 768px) 및 (max-width: 979px)'로 시작하며 최소 너비는 768픽셀이고 최대 너비는 979픽셀로 장치 스타일을 지정합니다.

　다음 영역은 최대 너비 979픽셀로 장치 스타일을 지정하는 것입니다. 따라서 '@media (max-width: 979px)'로 시작됩니다. 　마지막 두 영역은 각각 '@media (최소 너비: 980px)' 및 '@media (최소 너비: 1200px)'로 시작합니다. 최소 너비가 980픽셀인 장치에 대해 스타일을 설정하고 최소 너비가 1200픽셀인 장치에 대해 스타일을 설정합니다.
　그래서 이 스타일 시트의 기본 기능은 'min-width' 및 'max-width' 속성을 사용하여 기기의 최대 너비와 최소 너비를 기준으로 사용할 스타일을 결정하는 것입니다.

설명

　레이아웃의 반응성을 높이기 위해 Bootstrap은 세 가지 작업을 수행합니다:

　1. 그리드의 열 너비를 수정합니다.

　　2. 필요할 때마다 플로팅 요소 대신 스택 요소를 사용합니다. 여전히 스택 요소가 무엇인지 모르는 경우 w3.org의 다음 양식이 도움이 될 수 있습니다. 루트 요소(html)는 스택 컨텍스트의 루트를 형성하고 다른 스택 컨텍스트는 임의로 배치되어 생성됩니다. 요소(상대 위치 지정 포함) 요소에는 'auto'가 아닌 'z-index'의 계산된 값이 있습니다. 포함 블록과 관련하여 스택 컨텍스트는 필요하지 않습니다.
　3. 제목과 텍스트 크기를 올바르게 렌더링합니다.

모바일 친화적인 레이아웃을 더 빠르게 개발하세요.

🎜🎜Bootstrap에는 모바일 친화적인 레이아웃을 개발하는 데 유용한 여러 클래스가 있습니다. 이러한 클래스는 '반응형.less'에서 볼 수 있습니다. 🎜🎜.visible-phone, 너비가 767px 이하인 휴대폰에 표시되고, 너비가 979~768px인 태블릿에서는 숨겨지며, 데스크톱에서는 숨겨집니다(기본값). 🎜🎜.visible-tablet, 너비가 767px 이하인 휴대폰에서는 숨겨지고, 너비가 979px~768px인 태블릿에서는 표시되며, 데스크톱에서는 숨겨집니다(기본값). 🎜

.visible-desktop, 너비가 767px 이하인 휴대폰에서는 숨겨지고, 979px에서 768px까지 태블릿에서는 숨겨지며, 기본값인 데스크톱에서는 표시됩니다.

.hidden-phone, 너비가 767px 이하인 휴대폰에서는 보이지 않고, 979px에서 768px까지 태블릿에서는 보이고, 데스크탑에서는 보입니다. 이것이 기본값입니다.

.hidden-tablet, 너비가 767px 이하인 휴대폰에서 표시되고, 너비가 979px~768px인 태블릿에서는 숨겨지며, 데스크톱에서는 표시되며 기본값입니다.

.hidden-desktop, 너비가 767px 이하인 휴대폰에 표시되고, 너비가 979px~768px인 태블릿에 표시되며, 기본값인 바탕화면에는 숨겨집니다.

위 내용은 부트스트랩이 반응하나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!