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

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

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

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

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

　반응형 웹 디자인을 적용하려면 다양한 기기 크기에 맞는 스타일이 포함된 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)

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

설명

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

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

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

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

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

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

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