테스트 사이트 - 개발 중인 베타 버전입니다

CSS3 미디어 쿼리 - 추가 예제

· 8년 전 · 2290

CSS3 미디어 쿼리 - 추가 예제


미디어 쿼리를 사용하는 몇 가지 예를 살펴 보겠습니다.


이메일 링크로 작동하는 이름 목록부터 시작하겠습니다. HTML은 다음과 같습니다.


예제 1

<!DOCTYPE html>

<html>

<head>

<style>

ul {

    list-style-type: none;

}


ul li a {

    color: green;

    text-decoration: none;

    padding: 3px; 

    display: block;

}

</style>

</head>

<body>


<ul>

  <li><a data-email="johndoe@example.com" href="mailto:johndoe@example.com">John Doe</a></li>

  <li><a data-email="marymoe@example.com" href="mailto:marymoe@example.com">Mary Moe</a></li>

  <li><a data-email="amandapanda@example.com" href="mailto:amandapanda@example.com">Amanda Panda</a></li>

</ul>


</body>

</html>


data-email속성을 주목하십시오 . HTML5에서는 접두사가 붙은 속성을 사용하여 data-정보를 저장할 수 있습니다. data-나중에이 속성 을 사용하겠습니다 .




너비 520에서 699 픽셀까지 - 각 링크에 이메일 아이콘 적용

브라우저의 너비가 520 ~ 699px 사이 인 경우 각 이메일 링크에 이메일 아이콘을 적용합니다.


예제 2

@media screen and (max-width: 699px) and (min-width: 520px) {

    ul li a {

        padding-left: 30px;

        background: url(email-icon.png) left center no-repeat;

    }

}





너비는 700에서 1000px까지입니다.

브라우저의 너비가 700에서 1000px 사이 인 경우 각 이메일 링크 앞에 "이메일 :"텍스트가 붙습니다.


예제 3

@media screen and (max-width: 1000px) and (min-width: 700px) {

    ul li a:before {

        content: "Email: ";

        font-style: italic;

        color: #666666;

    }

}





너비가 1001px 이상인 경우 - 링크에 이메일 주소 적용

브라우저의 너비가 1001px 이상이면 링크에 이메일 주소가 추가됩니다.


data-개인의 이름 뒤에 전자 메일 주소를 추가하기 위해 특성 값을 사용합니다 .


예제 4

@media screen and (min-width: 1001px) {

    ul li a:after {

        content: " (" attr(data-email) ")";

        font-size: 12px;

        font-style: italic;

        color: #666666;

    }

}





폭 1151px 이상 - 이전에 사용한 아이콘 추가

브라우저 너비가 1151px 이상인 경우 이전에 사용한 아이콘을 다시 추가합니다.


여기에서는 추가 미디어 쿼리 블록을 작성할 필요가 없으며 쉼표를 사용하여 기존 미디어 쿼리에 추가 미디어 쿼리를 추가 할 수 있습니다 (이 연산자는 OR 연산자처럼 동작합니다).


보기 5

@media screen and (max-width: 699px) and (min-width: 520px), (min-width: 1151px) {

    ul li a {

        padding-left: 30px;

        background: url(email-icon.png) left center no-repeat;

    }

}

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

게시글 목록

번호 제목
2952
2951
2950
2949
2948
2947
2946
2945
2944
2943
2942
2941
2940
2939
2938
2937
2936
2935
2934
2933
2932
2931
2930
2929
2928
2927
2926
2925
2924
2923