집 >웹 프론트엔드 >CSS 튜토리얼 >CSS에서 반응형 레이아웃을 구현하는 방법

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

青灯夜游원래의: 2021-05-13 13:56:0813484검색

CSS로 반응형 레이아웃을 구현하는 방법: 1. 간단한 코드와 편리한 레이아웃의 장점을 지닌 플렉스 레이아웃을 사용합니다. 2. 미디어와 결합된 절대 레이아웃을 사용하여 반응형 레이아웃을 구현합니다. 4. 호환성이 좋은 플로트 레이아웃을 사용합니다.

이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

반응형 레이아웃의 네 가지 방법에 대한 간략한 소개

전체 HTML 코드

<body>
    <div class="box">
        <div class="left">left</div>
        <div class="center">中间</div>
        <div class="right">right</div>
    </div>
</body>

flex 레이아웃

.box{
    width: 100%
    height: 100px;
    display: flex;
}
.left{
    width: 300px;
    background-color: purple;
}
.center{
    flex: 1;
    background-color: pink;
}
.right{
    width: 300px;
    background-color: burlywood;
}

장점

간단한 코드와 편리한 레이아웃

단점

가운데 내용이 있으면 최소로 줄여도 작아지지 않습니다
그리고 좌우 폭도 작아집니다

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

절대 레이아웃

.box{
    position: relative;
    width: 100%;
    height: 100px;
}
.left{
    position: absolute;
    left: 0px;
    width: 300px;
    background-color: pink;
}
.right{
    position: absolute;
    right: 0px;
    width: 300px;
    background-color: pink;
}
.center{
    position: absolute;
    left: 300px;
    right: 300px;
    background-color: burlywood;
}
@media (max-width: 600px){
    .left,.right{
       /* 平分屏幕 */
        width: 50%;
    }
}

장점

미디어를 조합해서 사용할 수 있다 반응형 레이아웃 구현

단점

코드 작성이 복잡하고 레이아웃이 번거롭다
미디어를 사용하지 않고 화면을 균등하게 분할하고 너비가 600 미만이면 오른쪽이 왼쪽을 덮습니다

그리드 레이아웃

.box{
    display: grid;
    grid-template-columns: 300px 1fr 300px;
    grid-template-rows: 100px;
}
.left,.right{
    background-color: pink;
}
.center{
    background-color: burlywood;
}

장점

쓰기 편함

단점

, 그럴 수 없다 계속 축소하세요
웹 페이지의 너비가 고정 너비보다 작을 경우 하단이 미끄러질 수 있습니다.

float 레이아웃

플로팅 흐름을 오른쪽으로 변경해야 합니다. 중앙 위치

<div class="box">
    <div class="left">left</div>
    <div class="right">right</div>
    <div class="center">center</div>
</div>

.box{
    height: 200px;
}
.left{
    float: left;
    width: 300px;
    background-color: pink;
}
.right{
    float: right;
    width: 300px;
    background-color: pink;
}
.center{
    margin:0 300px;
    background-color: burlywood;
}

장점

상대적으로 간단하고 호환성이 좋음

단점

같은 행에 떠 있는 두 블록이 순서대로 있어야 함 함께 쓰기(예: 왼쪽과 오른쪽의 p가 쓰여짐)
압축이 작아지면 줄 바꿈이 발생함
중간 내용이 사라지지 않음

해결 방법

@media (max-width: 600px){
      .left,.right{
        width: 50%;
    }
    .center{
        opacity: 0;
    }
}

세 번째 문제

flex 레이아웃 상위 요소의 높이를 확장할 수 있음 내부 높이에 따라
그리드 레이아웃은 내부 높이에 따라 확장될 수도 있습니다

동영상 공유 학습: css 동영상 튜토리얼

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

html5 css css3 html Float flex

성명：

이전 기사：CSS에서 글꼴 색상 그라데이션을 설정하는 방법다음 기사：CSS에서 글꼴 색상 그라데이션을 설정하는 방법