일반 CSS 미디어 쿼리 중단점

일반 CSS 미디어 쿼리 중단점

이 질문에는 이미 다음과 같은 답이 있습니다.

응답 사이트의 미디어 쿼리에 대한 일반 중단점 (5개 답변)

마감됨3년 전에.

저는 CSS 미디어 쿼리를 사용한 응답형 웹 사이트에서 일하고 있습니다.

다음은 기기에 적합한 조직입니까?전화, ipad(가로 및 세로), 데스크톱 및 랩톱, 대형 화면

일반적인 미디어 쿼리 중단점 값은 무엇입니까?

다음 중단점을 사용할 계획입니다.

• 320: 스마트폰 초상화
• 481: 스마트폰 풍경
• 641 아니면 768?IPad 초상화 ?
• 961: IPad 가로/작은 노트북 ?
• 1025: 데스크톱 및 랩톱
• 1281: 와이드 스크린

당신은 어떻게 생각하나요?나는 ?와 같은 몇 가지 의심이 있습니다.점수

특정 장치에서 @media 규칙을 대상으로 하는 것보다 특정 레이아웃을 기반으로 하는 것이 훨씬 실용적입니다.즉, 바탕 화면 브라우저 창을 점차 좁히고 콘텐츠의 자연스러운 중단점을 관찰합니다.사이트마다 다릅니다.디자인이 각 브라우저 너비에서 잘 흐르기만 하면 화면 크기에 상관없이 상당히 안정적으로 작동해야 합니다.

다음을 사용해 왔습니다.

@media only screen and (min-width: 768px) {
    /* tablets and desktop */
}

@media only screen and (max-width: 767px) {
    /* phones */
}

@media only screen and (max-width: 767px) and (orientation: portrait) {
    /* portrait phones */
}

이 기능은 비교적 단순하게 유지되며 세로 모드에서 전화기에 대해 약간 다른 작업을 수행할 수 있습니다(대부분의 경우 다양한 요소를 변경해야 함).

나는 4개의 중단점을 사용하고 있지만 랠프.m은 각 사이트가 고유하다고 말했습니다.실험을 해보세요.너무 많은 장치, 화면 및 해상도로 인해 마법의 중단점이 없습니다.

여기 제가 템플릿으로 사용하는 것이 있습니다.저는 서로 다른 모바일 기기에서 각 중단점에 대한 웹사이트를 확인하고 해당 중단점에 대해 올바르게 표시되지 않는 각 요소(Ul, div 등)에 대한 CSS를 업데이트하고 있습니다.

지금까지 그것은 제가 만든 여러 반응형 웹사이트에서 작동했습니다.

/* SMARTPHONES PORTRAIT */
@media only screen and (min-width: 300px) {


}

/* SMARTPHONES LANDSCAPE */
@media only screen and (min-width: 480px) {


}

/* TABLETS PORTRAIT */
@media only screen and (min-width: 768px) {


}


/* TABLET LANDSCAPE / DESKTOP */
@media only screen and (min-width: 1024px) {


}    

갱신하다

2015년 9월 현재, 저는 더 좋은 것을 사용하고 있습니다.이러한 미디어 쿼리 중단점이 더 많은 장치와 데스크톱 화면 해상도와 일치한다는 것을 알게 되었습니다.

style.css에서 데스크톱용 CSS를 모두 보유

response.css에 대한 모든 미디어 쿼리: 응답 메뉴에 대한 모든 CSS + 미디어 중단점

@media only screen and (min-width: 320px) and (max-width: 479px){ ... }

@media only screen and (min-width: 480px) and (max-width: 767px){ ... }

@media only screen and (min-width: 768px) and (max-width: 991px){ ... }

@media only screen and (min-width: 992px){ ... }

2019년 업데이트: 아래의 Hugo 코멘트에 따르면, 저는 새로운 매우 넓은 화면 때문에 최대 너비 1999px를 제거했습니다.

이것은 css-tricks 링크에서 온 것입니다.

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
/* Styles */
}

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

나는 768에서 단 하나의 중단점을 사용하고 있다고 말할 수 있습니다. 즉,min-width: 768px태블릿 및 데스크톱을 제공하고,max-width: 767px전화 서비스를 제공합니다.

그 이후로 한 번도 돌아보지 않았어요.이를 통해 새로운 해상도를 가진 새로운 Android 기기를 두려워할 필요 없이 최소 비용에서 개발 시간으로 모든 기기에서 합리적인 경험을 제공할 수 있습니다.

표준 장치에 대한 미디어 쿼리

일반적으로 모바일, 태블릿, 데스크톱 및 대형 화면용

모바일

 /* Smartphones (portrait and landscape) ----------- */
    @media only screen 
    and (min-device-width : 320px) 
    and (max-device-width : 480px) {

    /* Styles */

    }

태블릿

@media only screen 
    and (min-device-width : 768px) 
    and (max-device-width : 1024px) {

         /* Styles */

    }

데스크톱 및 노트북

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

    /* Styles */

}

화면 확대

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

    /* Styles */

}

풍경 및 초상화를 포함한 상세 정보

/* Smartphones (portrait and landscape) ----------- */
    @media only screen 
    and (min-device-width : 320px) 
    and (max-device-width : 480px) {
    /* Styles */
    }

    /* Smartphones (landscape) ----------- */
    @media only screen 
    and (min-width : 321px) {
    /* Styles */
    }

    /* Smartphones (portrait) ----------- */
    @media only screen 
    and (max-width : 320px) {
    /* Styles */
    }

    /* Tablets, iPads (portrait and landscape) ----------- */
    @media only screen 
    and (min-device-width : 768px) 
    and (max-device-width : 1024px) {
    /* Styles */
    }

    /* Tablets, iPads (landscape) ----------- */
    @media only screen 
    and (min-device-width : 768px) 
    and (max-device-width : 1024px) 
    and (orientation : landscape) {
    /* Styles */
    }

    /* Tablets, iPads (portrait) ----------- */
    @media only screen 
    and (min-device-width : 768px) 
    and (max-device-width : 1024px) 
    and (orientation : portrait) {
    /* Styles */
    }

    /* Desktops and laptops ----------- */
    @media only screen 
    and (min-width : 1224px) {
    /* Styles */
    }

    /* Large screens ----------- */
    @media only screen 
    and (min-width : 1824px) {
    /* Styles */
    }

    /* iPhone 4 ----------- */
    @media
    only screen and (-webkit-min-device-pixel-ratio : 1.5),
    only screen and (min-device-pixel-ratio : 1.5) {
    /* Styles */
    }

언급

트위터 부트스트랩의 중단점을 사용해 보십시오.입양률이 너무 높아서 안전할 겁니다

@media only screen and (min-width : 320px) and (max-width : 480px) {/*--- Mobile portrait ---*/}
@media only screen and (min-width : 480px) and (max-width : 595px) {/*--- Mobile landscape ---*/}
@media only screen and (min-width : 595px) and (max-width : 690px) {/*--- Small tablet portrait ---*/}
@media only screen and (min-width : 690px) and (max-width : 800px) {/*--- Tablet portrait ---*/}
@media only screen and (min-width : 800px) and (max-width : 1024px) {/*--- Small tablet landscape ---*/}
@media only screen and (min-width : 1024px) and (max-width : 1224px) {/*--- Tablet landscape --- */}

Google 분석으로 이동하면 웹 사이트 방문자가 사용하는 화면 해상도를 확인할 수 있습니다.

청중 > 기술 > 브라우저 & OS > 화면 해상도 (통계 위 메뉴)

제 사이트에는 한 달에 약 5,000명의 방문자가 방문하며 responsinator.com 의 무료 버전에 사용된 치수는 방문자의 화면 해상도를 꽤 정확하게 요약한 것입니다.

이것은 당신이 너무 완벽할 필요가 없게 도와줄 수 있습니다.

저는 항상 데스크톱을 먼저 사용하는데, 모바일 퍼스트가 가장 우선순위가 높지 않습니까?IE< 8은 모바일 CSS를 보여줄 것입니다.

normal css here: 

@media screen and (max-width: 768px) {}

@media screen and (max-width: 480px) {}

때때로 몇 가지 사용자 지정 크기.저는 부트스트랩 등을 좋아하지 않습니다.

픽셀을 사용하는 대신 적응성과 유동성이 뛰어나기 때문에 em 또는 백분율을 사용해야 하며, 대상 장치가 콘텐츠를 대상으로 하지 않는 것이 좋습니다.

HTML5 rockr 읽기, 모바일 우선

화면 'media' 유형 구성에 따라 코드를 깨끗하게 유지하고 스타일시트를 논리적으로 구분합니다.


위의 히만수의 답변을 참고로 사용:일반 CSS 미디어 쿼리 중단점
그리고.
2) https://www.w3schools.com/css/css3_mediaqueries.asp

당신의 대답은 다음과 같습니다.

<link rel="stylesheet" media="@media only screen and (min-width : 320px) and (max-width : 480px)" href="mobilePortrait.css">

<link rel="stylesheet" media="@media only screen and (min-width : 481px) and (max-width : 595px)" href="mobileLandscape.css">

당신의 브레이크 포인트는 정말 좋아 보입니다.해습다봤니다니.768px삼성 태블릿에서 그리고 그것을 넘어서, 나는 정말로 좋아합니다.961px만약 당신이 반응형 CSS 기술을 사용한다면, 당신은 그것들 모두가 필요하지 않습니다.% width/max-width블록 및 이미지(텍스트도 포함)에 대해 설명합니다.

언급URL : https://stackoverflow.com/questions/16443380/common-css-media-queries-break-points