CSS 미디어 쿼리와 함께 두 개의 뷰포트 사용

Question

저는 iPhone 화면에서 웹 사이트를 반응 적으로 만들고 싶습니다. 아직 CSS 미디어 쿼리에 멍청한 반응을 보이고 있습니다.

지금은 모바일 용으로 320px 화면과 데스크톱 버전 (1280px)의 두 가지 CSS를 사용하고 있습니다. 내가하고 싶은 것은 320px 화면을 감지했을 때 뷰포트가 자동으로 320px로 조정되지만 더 큰 크기 (> 320px)라면 자동으로 뷰포트 인 1280px가 사용됩니다.

나는 "width = device-width"로 뷰포트를 동적으로 변경할 수 있지만 레이아웃은 완전히 380px 화면의 삼성 Note 3을 말합니다. 1280px 뷰포트를 적용하기 위해 320px보다 큰 화면을 원합니다.

가장 간단한 것처럼 보이지만 원하는대로 작동하지 않습니다. 희망이 누군가가 나를 enlight 수 있으며 내 나쁜 영어가 혼란하지 않기를 바랍니다.

감사합니다.

Answer 1

우선, 은 장치 너비를 사용하지 않으므로 거의 사용하지 않아야합니다. 많은 사람들이 작은 자신의 장치보다 뷰포트 사용하려면 (나 같은!)를 그가 말했다되고으로

을, 당신은 당신의 @media 쿼리 min-width 또는 max-width 중 하나를 사용해야합니다. 내가 추천하는이 방법을 사용하여 모바일 첫번째 개발

/* All styles for mobile (<320px) */ 
... All of your properties ... 

@media (min-width: 320px) { /* Apply on all screen larger than 319px */ 
    /* Override older properties for the 1280px viewport */ 
    .. Your properties that override the smaller sized page properties ... 
} 

라고 다음을하고있다, 당신은 모든 화면 크기를 제공하기 위해 서로뿐만 아니라 이러한 여러 가지를 사용할 수 있습니다. 먼저 모바일 역할을하지 않으려면

그러나, 당신은 내가 당신의 페이지에 아마 3-5ish 따라 다음의 몇 가지를 사용하는 것이 좋습니다, 다시 그것을 반대 방향뿐만 아니라

/* All styles for large screen (1280px layout) */ 
... All of your properties ... 

@media (max-width: 320px) { /* Apply on all screen smaller than 321px */ 
    /* Override older properties for the 320px viewport */ 
    .. Your properties that override the larger sized page properties ... 
} 

을 수행 할 수 있습니다 , 모든 화면 크기를 제공하기 위해