반응형 레이아웃을 구현하는 방법

1. 반응형 레이아웃: 즉, 웹사이트는 각 터미널마다 특정 버전을 만드는 대신 여러 터미널과 호환될 수 있습니다. 이 개념은 모바일 인터넷 브라우징을 해결하기 위해 탄생했습니다.

2, 반응형 레이아웃을 구현하는 세 가지 방법

1. CSS3-미디어 쿼리(가장 간단한 방법이지만 많은 요구 사항을 충족할 수 없음)

2. 네이티브 Javascript의 도움으로( 비용 높음, 권장하지 않음)

3. 타사 오픈 소스 프레임워크(브라우저의 반응형 레이아웃을 잘 지원할 수 있는 부트스트랩 등)

3, CSS3-Media Query 공통 속성

장치 너비, 장치 높이 화면 너비 및 높이

너비, 높이 렌더링 창 너비 및 높이

방향 장치 방향

해상도 장치 해상도

4, CSS3-미디어 쿼리 기본 구문

외부 CSS 구문과 인라인 스타일의 구문

예: 외부 스타일 시트 link.css (화면 너비가 480px 이하이면 배경이 빨간색임)

link.css 구문에는 하나의 문장만 있습니다: body{Background: red;}

5, Bootstrap

부트스트랩을 사용하려면 CSS 및 js 파일이 필요하며 총 3개가 있습니다. 순서는 되돌릴 수 없습니다(버전 변경 가능). 아래와 같이

            <script src="js/jquery.min.js"></script>
        <link href="css/bootstrap.min.css" rel="stylesheet">
        <script src="js/bootstrap.min.js"></script>

위 내용은 반응형 레이아웃을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!