부트스트랩 반응형이란 무엇입니까?

부트스트랩에서 반응성은 동일한 페이지가 다양한 화면 크기에서 다양한 레이아웃을 가지며 다양한 해상도의 장치와 호환될 수 있음을 의미합니다. 반응형 웹 디자인을 사용하면 사용자가 다양한 크기의 장치를 통해 웹 사이트를 탐색하여 좋은 시각적 경험을 얻을 수 있습니다. 그리드 시스템을 사용하고 행을 12개의 그리드로 나누면 효과를 얻을 수 있습니다.

이 튜토리얼의 운영 환경: Windows 10 시스템, 부트스트랩 버전 5, DELL G3 컴퓨터

부트스트랩 반응형이란 무엇입니까

반응형 레이아웃은 동일한 페이지가 다양한 화면 크기에서 다양한 레이아웃을 가지며, 다른 해상도의 기기와 호환 가능

기존 개발 방식은 하나는 PC용으로, 다른 하나는 모바일용으로 개발하는 방식이었습니다. 하지만 반응형 레이아웃을 사용할 경우 CSS가 상대적으로 무겁다는 단점이 있습니다.

구현: 그리드 시스템을 사용하여 행을 12개의 그리드로 균등하게 나누고 요소가 차지하는 그리드 수를 지정할 수 있습니다.

반응형 웹 디자인이란 무엇입니까

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

유동적 레이아웃 예시에 반응성을 적용했으며 다양한 화면 크기에서 탐색할 수 있도록 초대합니다. Chrome 또는 FireFox용 창 크기 조정 확장 프로그램을 사용하여 브라우저 크기를 조정할 수 있습니다.

반응형 웹 디자인 작동 방식

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

반응형 웹 디자인을 위한 CSS 심층 연구

'bootstrap-반응형.css'를 연구하여 "반응형 디자인"이 어떻게 구현되는지 뉘앙스에 대해 알아 보겠습니다. 그 전에 웹 페이지의 헤드 영역에 다음 코드 줄을 추가해야 합니다.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

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

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

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

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

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

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

첫 번째 영역은 '@media (최대 너비: 480px)'로 시작하며 최대 너비가 480픽셀인 기기에 대한 스타일을 설정합니다.

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

세 번째 영역은 '@media (최소 너비: 768px) 및 (최대 너비: 979px)'로 시작하여 최소 너비 768픽셀, 최대 너비 979픽셀의 기기 스타일을 설정합니다.

다음 영역은 최대 너비 979픽셀로 장치 스타일을 지정하는 것입니다. 따라서 '@media (max-width: 979px)'로 시작됩니다.

마지막 두 영역은 각각 '@media (최소 너비: 980px)' 및 '@media (최소 너비: 1200px)'로 시작합니다. 전자는 최소 너비 980픽셀의 기기에 대한 스타일을 설정하는 것입니다. 후자는 최소 너비가 1200픽셀인 장치에 대한 스타일 설정입니다.

그래서 이 스타일 시트의 기본 기능은 'min-width' 및 'max-width' 속성을 사용하여 장치의 최대 너비와 최소 너비를 기준으로 사용할 스타일을 결정하는 것입니다.

관련 권장 사항: 부트스트랩 튜토리얼

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