부트스트랩에서 응답성을 구현하는 방법

모바일 기기의 인기로 인해 사용자가 모바일 기기를 통해 웹사이트를 탐색하여 좋은 시각 효과를 얻을 수 있는 방법은 피할 수 없는 문제가 되었습니다. 반응형 웹 디자인은 이를 달성하는 효과적인 방법입니다.

반응형 웹 디자인은 사용자가 다양한 크기의 기기를 통해 웹 사이트를 탐색할 때 좋은 시각적 효과를 얻을 수 있도록 하는 방법입니다. (추천 학습: Bootstrap 동영상 튜토리얼)

예를 들어 먼저 컴퓨터 모니터에서 웹사이트를 탐색한 다음 스마트폰에서 탐색합니다. 스마트폰의 화면 크기는 컴퓨터 모니터보다 훨씬 작지만 그렇지 않습니다. 두 가지 모두 사용자 경험이 거의 동일하며, 이는 이 웹사이트가 반응형 디자인에서 훌륭한 역할을 했다는 것을 보여줍니다.

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

반응형 웹 디자인 작동 방식

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

웹페이지의 헤드 영역에 다음 코드 줄을 추가해야 합니다.

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

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

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

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

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

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

BootStrap의 반응성은 col-(sm/md/ls/xl)-( 1/2/3/4/5/6/7/8/9/10/11/12) 다양한 디스플레이 영역에서 다양한 레이아웃 효과를 달성하고 반응형 레이아웃을 달성합니다.

설명

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

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

2. 필요할 때마다 플로팅 요소 대신 스택 요소를 사용합니다. 여전히 스택 요소가 무엇인지 모르는 경우 w3.org의 다음 양식이 도움이 될 수 있습니다.

루트 요소(html)는 스택 컨텍스트의 루트를 형성하고 다른 스택 컨텍스트는 임의로 배치된 위치에서 생성됩니다. 요소(상대 위치 지정 요소 포함, 계산된 값이 'auto'가 아닌 'z-index'임). 포함 블록과 관련하여 스택 컨텍스트는 필요하지 않습니다.

3. 제목과 텍스트를 크기에 맞게 렌더링하세요.

Bootstrap과 관련된 더 많은 기술 기사를 보려면 Bootstrap Tutorial 칼럼을 방문하여 알아보세요!

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