css3media 반응형 레이아웃 예시 분석-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

css3media 반응형 레이아웃 예시 분석

高洛峰

Mar 07, 2017 pm 03:27 PM

반응형 레이아웃은 다양한 단말기의 사용자에게 보다 편안한 인터페이스와 더 나은 사용자 경험을 제공할 수 있습니다. 현재 대형 화면 모바일 장치가 인기를 누리고 있는 상황에서 이를 "대세"라고 해도 과언이 아닙니다. 점점 더 많은 디자이너들이 이 기술을 채택함에 따라 우리는 많은 혁신을 목격할 뿐만 아니라 일부 확립된 패턴도 목격하고 있습니다. 기술의 발전과 함께 CSS3의 특성도 널리 사용되었습니다. CSS3의 반응형 레이아웃과 마찬가지로 CSS3의 새로운 태그 중 상당수도 매우 발전했습니다. 원래는 PC에서만 표시되던데 이제 @media를 추가하면 반응형 웹페이지를 만들 수 있습니다. 예를 들어

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <style>
/*    小于200px*/   
        @media only screen and (max-width:200px ) {   
            #p{   
                background: red;   
            }   
        }   
/*    大于300px*/   
        @media only screen and (min-width:300px ) {   
            #p{   
                background: yellow;   
            }   
        }   

    </style>
    <body>
        <p id="p">小于200px背景变红色大于300px背景为黄色</p>
    </body>
</html>

로그인 후 복사

<🎜와 같이 PC에서도 사용할 수 있습니다. >

코드 세그먼트

css3media 반응형 레이아웃 예시 분석

@media의 효과는 단일 조건 또는 이중 조건에 사용할 수 있습니다. 예:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <style>
/*    小于200px*/   
        @media (min-width:200px ) and (max-width:500px ) {   
            #p{   
                background: red;   
            }   
        }   
    </style>
    <body>
        <p id="p">200px以上并且500px以下背景变成红色</p>
    </body>
</html>

로그인 후 복사

이 코드는 200px 미만이거나 500px보다 크면 효과가 표시되지 않습니다

간단한 @media로 반응형 페이지를 구현할 수 있습니다.

페이지가 참 쉽죠? 450px 이상의 페이지 효과입니다

css3media 반응형 레이아웃 예시 분석

450px 이하의 페이지 효과입니다

전체적인 접근 방식은 각 p의 너비가 450px 이하일 때 반응적으로 축소하는 것입니다. 100% css3media 반응형 레이아웃 예시 분석

높이가 자동입니다. 이 웹페이지를 작성하는 중에 작은 문제가 발생했습니다. 페이지 하단에 도달했을 때 하단 탐색이 아래로 평화롭게 떨어지지 않았습니다. 여기서 약간의 지식을 공유하겠습니다. 이것이 저의 최종 해결책입니다. 하단에 스타일을 명확하게 지정하면 하단이 하단에 단단히 고정됩니다. @media(orientation:portrait)

세로 화면의 경우 가로 및 세로 화면에 모두 적응할 수 있도록 @media(orientation:landscape)로 설정하세요. 세로 화면에는 반응형 레이아웃을 사용하는 등 많은 장점이 있습니다. HR에서도 휴대폰에서 이력서를 볼 수 있습니다. 조용히

위의 css3media 반응형 레이아웃 예제는 모두 편집자가 공유한 내용이므로 참고가 되셨으면 좋겠고, PHP 중국어 홈페이지도 지원해 주시길 바랍니다.

더 많은 css3media 반응형 레이아웃 예제 분석 및 관련 기사를 보려면 PHP 중국어 웹사이트를 주목하세요!

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.