CSS에서 반응형 레이아웃을 구현하는 방법-CSS 튜토리얼-php.cn

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

青灯夜游

풀어 주다： 2023-01-06 11:12:52

원래의

13476명이 탐색했습니다.

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

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

이 튜토리얼의 운영 환경: 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!