반응형 웹 디자인을 구현하는 방법

이 글에서 공유한 내용은 반응형 웹 디자인 구현에 관한 내용입니다. 도움이 필요한 친구들에게 도움이 되기를 바랍니다.

미디어 쿼리 사용

media 미디어 쿼리에는 선택적 미디어 유형이 포함되며 CSS3 사양 조건에 따라 0개 이상의 표현식이 포함됩니다. 미디어 특성을 설명하고 결국 true 또는 false로 구문 분석됩니다. 미디어 쿼리에 지정된 미디어 유형이 문서를 표시하는 데 사용된 장치 유형과 일치하고 모든 표현식이 true로 평가되면 미디어 쿼리의 결과는 true입니다.

• # 🎜 🎜#500px-800px @media 화면과 (최소 너비: 500px) 및 (최대 너비: 800px) { ... }

• 최소 너비 500 사이의 장치 @미디어 화면 및 (최소 너비: 500px){... }

• @미디어가 인쇄되지 않음 및 (최대 너비: 1200px)

  #🎜 🎜#

사용법:

# 🎜🎜#예 르# 🎜🎜#

html：

nbsp;html>


    <meta>
    <title>响应式设计</title>

    <link>
    <link>
    <link>


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

css1：

.body{
    margin:0;
    
}


.top,.zhong,.xia{
    width:100%;
    margin:0 auto;
    
}


.top{
    height:100px;
    background:#00f;
    
}


.zhong{
overflow:hidden;
    
}

.xia{
    height:100px;
    background:#ff0;
    
}

.left,.zhon,.right{
    float:left;
    
}

.left{
    width:100%;
    height:200px;
    background:#0f0;
}

.zhon{
    width:100%;
    height:350px;
    background:#f00;
}

.right{
    width:100%;
    height:200px;
    background:#00f;
}

css2：

.body{
    margin:0;
    
}


.top,.zhong,.xia{
    width:100%;
    margin:0 auto;
    
}


.top{
    height:100px;
    background:#00f;
    
}


.zhong{
overflow:hidden;
    
}

.xia{
    height:100px;
    background:#ff0;
    
}

.left,.zhon,.right{
    float:left;
    
    
}

.left{
    width:30%;
    height:200px;
    background:#0f0;
}

.zhon{
    width:70%;
    height:350px;
    background:#f00;
}

.right{
    width:100%;
    height:200px;
    background:#00f;
}

css3 ; 🎜🎜#

3,

# # 🎜🎜#요약:.미디어 쿼리미디어 쿼리는 다양한 조건에서 다양한 스타일을 사용할 수 있으므로 페이지는 지금까지 다양한 터미널 장치에서 다양한 렌더링 효과를 얻을 수 있었습니다. CSS3 Media 쿼리는 많은 브라우저에서 지원되며 IE6-8 브라우저를 제외한 모든 최신 브라우저에서 완벽하게 지원됩니다. 또 다른 차이점은 미디어 다른 CSS3 속성처럼 다른 브라우저에서 쿼리 앞에 접두사를 붙일 필요는 없습니다.

관련 권장 사항:

CSS 반응형 구현 코드 및 효과 정보

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

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