오늘날 모바일 단말 장치가 점점 더 많아지면서 모든 화면에 적용하고 개발하는 데 비용이 너무 많이 듭니다.
반응형 개발을 통해 웹 사이트는 여러 터미널과 호환될 수 있습니다. (추천 학습: Bootstrap 동영상 튜토리얼 )
반응형 레이아웃을 통해 웹사이트는 컴퓨터, 태블릿, 휴대폰에서 더 나은 성능을 발휘할 수 있습니다. 읽기 환경에서는 사용자에게 표시되는 웹 콘텐츠가 화면 크기에 따라 다릅니다. 미디어 쿼리를 사용하여 화면 크기(주로 너비 감지)를 감지하고 다양한 CSS 스타일을 설정하여 반응형 레이아웃을 얻을 수 있습니다.
반응형 개발의 원칙: 미디어 쿼리
미디어 쿼리, 현재 화면으로 쿼리(미디어 media ), 다양한 화면 너비에 맞게 다양한 스타일을 설정하여 다양한 화면에 적용합니다. 브라우저 크기를 재설정하면 브라우저의 너비와 높이에 따라 페이지도 다시 렌더링됩니다. 간단히 말해서, 다양한 화면에서 다양한 스타일을 설정하여 다양한 화면에 적용할 수 있습니다.
구현 방법 : 화면 너비를 쿼리하여 특정 너비 범위의 웹 페이지 레이아웃을 지정합니다.
초소형 화면(모바일 장치) w<768px
소형 화면 장치 768px-992px 768 <= w <992
#🎜 🎜#중간 화면 992px-1200px 992 =< w <1200와이드스크린 장치 1200px 이상 w>=1200 CSS 구문: #🎜🎜 # @media mediatype and|not|only (media feature) {
CSS-Code;
}
Bootstrap과 관련된 더 많은 기술 기사를 보려면
위 내용은 부트스트랩 프레임워크는 휴대폰에 어떻게 적용되나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!