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

不言
풀어 주다: 2018-07-24 11:17:44
원래의
1671명이 탐색했습니다.

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

미디어 쿼리 사용

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿