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

이 글에서 공유한 내용은 CSS를 사용하여 반응형 레이아웃을 구현하는 방법에 대한 내용입니다. 도움이 필요한 친구들에게 도움이 되기를 바랍니다.

CSS를 사용하여 반응형 레이아웃 구현

반응형 레이아웃은 매우 고급스럽고 어렵게 느껴지지만 실제로는 CSS만 사용하여 반응형 레이아웃을 구현할 수도 있습니다.
사용해야 할 것은 CSS의 응답이 없는 쿼리입니다. 사용법:

@media를 사용하는 세 가지 방법

1. CSS 파일에서 직접 사용:

@media 类型 and (条件1) and (条件二){
    css样式
}
@media screen and (max-width:1024px) {
    body{
        background-color: red;
    }
}

2. @import를 사용하여 import

@import url("css/moxie.css") 및 (max- width:980px);

3 가장 일반적으로 사용되는 방법이기도 합니다. 링크 연결을 직접 사용하고, 미디어 속성을 사용하여 쿼리 방법을 설정합니다

다음은 간단한 반응형 레이아웃 HTML 코드입니다.

nbsp;html>


    <meta>
    <title>响应式</title>
    <link>
<link>
    <link>


    <p>头部</p>
    <p>
        </p><p>左边</p>
        <p>中间</p>
        <p>右边</p>
    
    <p>底部</p>

다음은 CSS입니다. 스타일:

*{
    margin:0;
    padding:0;
    text-align:center;
    color:yellow; 
}

.header{
    width:100%;
    height:100px;
    background:#ccc;
    line-height:100px;
}
.main{
    background:green;
    width:100%;
}
.clearfix:after{
    display:block;
    height:0;
    content:"";
    visibility:hidden;
    clear:both;
}
.left,.center,.right{
    float:left;
}
.left{
    width:20%;
    background:#112993;
    height:300px;
    font-size:50px;
    line-height:300px;
}
.center{
    width:60%;
    background:#ff0;
    height:400px;
    color:#fff;
    font-size:50px;
    line-height:400px;
}
.right{
    width:20%;
    background:#f0f;
    height:300px;
    font-size:50px;
    line-height:300px;
}
.footer{
    width:100%;
    height:50px;
    background:#000;
    line-height:50px;
}

스타일 코드

.right{
    float:none;
    width:100%;
    background:#f0f;
    clear:both;
}
.left{
    width:30%;
}
.center{
    width:70%;
}
.main{
    height:800px;
}

스타일 코드

.left,.center,.right{
    float:none;
    width:100%;
}

창이 1024px보다 크면 명령이 압축되고 다른 변경 사항은 발생하지 않습니다.

창이 1024px보다 작고 720px보다 크면 오른쪽 열이 부동을 취소하고 아래에 표시됩니다. :

창이 720px 미만인 경우 왼쪽, 중간, 오른쪽의 세 열이 모두 부동 해제되고 너비가 100%입니다.

그렇습니다. 레이아웃이 그렇게 간단합니다. , 세부 사항을 파악하려면 지속적인 연습이 필요합니다.

관련 권장 사항:

CSS를 사용하여 마우스를 손 스타일로 변경하는 방법 소개

css 상자 모델 설명 및 예제

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