@ 미디어 최소 너비 및 최대 너비

225

이 @media설정이 있습니다.

HTML :

<head>
  <meta name="viewport" content="width=device-width, user-scalable=no" />
</head>

CSS :

@media screen and (min-width: 769px) {
    /* STYLES HERE */
}

@media screen and (min-device-width: 481px) and (max-device-width: 768px) { 
    /* STYLES HERE */
}

@media only screen and (max-device-width: 480px) {
    /* STYLES HERE */
}

이 설정을 사용하면 iPhone에서 작동하지만 브라우저에서는 작동하지 않습니다.

내가 이미 device메타에 있었기 때문에 그럴 수 max-width:480px있습니까?

css mobile media-queries

— 랠리
소스

1

WHat 's issue-기본 스타일은 769px보다 넓은 화면에 적용됩니다.

— Gurpreet Singh

단지를 제거 @media screen and (min-width:769px){일반 브라우저 스타일을 중심으로

— 졸탄 토스

Zoltan은 무슨 뜻인가요? 그리고 나는 그것을 해결할 수 있다고 생각합니다. 첫째, 문제는 최대 장치로 브라우저 크기를 조정했을 때 전화로 작동했지만 브라우저에서 작동하지 않고 "장치"없이 작동한다는 것입니다.

— rallybilen

기본적으로 "장치"가 없으면 모바일 / 브라우저에서 모두 작동하지만 장치를 추가하면 브라우저에서 장치를 볼 수 없습니다 \

— rallybilen

1

브라우저 크기가에서 끝나기 때문 이 980px아닙니다 . 960980px

339

가장 좋은 방법은 5.5, 6, 7 및 8을 포함한 이전 브라우저와 같이 이전 브라우저에 기본 CSS를 작성하는 것입니다. @media를 읽을 수 없습니다. @media를 사용할 때 다음과 같이 사용합니다.

<style type="text/css">
    /* default styles here for older browsers. 
       I tend to go for a 600px - 960px width max but using percentages
    */
    @media only screen and (min-width: 960px) {
        /* styles for browsers larger than 960px; */
    }
    @media only screen and (min-width: 1440px) {
        /* styles for browsers larger than 1440px; */
    }
    @media only screen and (min-width: 2000px) {
        /* for sumo sized (mac) screens */
    }
    @media only screen and (max-device-width: 480px) {
       /* styles for mobile browsers smaller than 480px; (iPhone) */
    }
    @media only screen and (device-width: 768px) {
       /* default iPad screens */
    }
    /* different techniques for iPad screening */
    @media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
      /* For portrait layouts only */
    }

    @media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
      /* For landscape layouts only */
    }
</style>

그러나 @media로 원하는 것을 할 수 있습니다. 이것은 모든 브라우저에 대한 스타일을 만들 때 내가 찾은 최고의 예입니다.

iPad CSS 사양.

또한! 인쇄 가능성을 찾고 있다면@media print{}

— bashleigh
소스

16

'mac'화면을 왜 넣었습니까? 큰 고해상도 화면을 가질 수있는 것은 "놀라운"Mac 뿐만이 아닙니다!

— Luke

38

근본적인 문제는 max-device-widthvs old를 사용하고 max-width있습니다.

"device"키워드를 사용하면 브라우저 창의 너비가 아니라 화면의 실제 크기를 타겟팅합니다.

예를 들면 다음과 같습니다.

@media only screen and (max-device-width: 480px) {
    /* STYLES HERE for DEVICES with physical max-screen width of 480px */
}

대

@media only screen and (max-width: 480px) {
    /* STYLES HERE for BROWSER WINDOWS with a max-width of 480px. 
       This will work on desktops when the window is narrowed.  */
}

— jpostdesign
소스

11

작은 화면의 웹 사이트가 데스크톱 화면과 같은 동작을하는 경우이 메타 태그를 헤더에 넣어야합니다

<meta name="viewport" content="width=device-width, initial-scale=1">

미디어 쿼리의 경우 다음과 같이 설정할 수 있습니다

이것은 당신의 모든 모바일 / 핸드폰 폭을 다룰 것입니다

    @media only screen and (min-width: 200px) and (max-width: 767px)  {
    //Put your CSS here for 200px to 767px width devices (cover all mobile portrait width //

    }

iPad 및 iPad Pro의 경우 사용해야합니다

    @media only screen and (min-width: 768px) and (max-width: 1024px)  {
    //Put your CSS here for 768px to 1024px width devices(covers all iPad portrait width //

    }

가로 모드에 CSS를 추가하려면 다음을 추가하십시오.

(방향 : 가로)

  @media only screen and (min-width: 200px) and (max-width: 767px) and (orientation : landscape) {
        //Put your CSS here for 200px to 767px width devices (cover all mobile landscape width //

        }

— 로 히트 카우 섹
소스

8

content속성 의 올바른 값 은 다음을 initial-scale대신 포함해야 합니다.

<meta name="viewport" content="width=device-width, initial-scale=1">
                                                   ^^^^^^^^^^^^^^^

스 니펫 확장

— 크세 니아 티토 바
소스

2

이유를 설명하고 참조를 추가 할 수 있다면이 답변이 더 유용 할 것입니다.

— 마이클 벤자민

2

@Michael_B 초기 값은 'user-scalable = no'입니다. 그것은 내가 생각하는 전부라고 말합니다.

— Apolo Radomer

0

일부 iPhone의 경우 다음과 같이 뷰포트를 넣어야합니다

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, shrink-to-fit=no, user-scalable=0" />

— 너가
소스