일반적인 CSS 미디어 쿼리 중단 점

일반적인 CSS 미디어 쿼리 중단 점

---

CSS 미디어 쿼리를 사용하여 응답 성이 뛰어난 웹 사이트를 만들고 있습니다.

다음은 장치에 적합한 조직입니까? 휴대 전화, Ipad (가로 및 세로), 데스크톱 및 노트북, 대형 화면

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

다음과 같은 중단 점을 사용하려고합니다.

• 320 : 스마트 폰 초상화
• 481 : 스마트 폰 풍경
• 641 또는 768 ??? : IPad Portrait ???
• 961 : 아이 패드 랜드 스케이프 / 소형 노트북 ???
• 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 개의 중단 점을 사용하고 있지만 ralph.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가 있음

responsive.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 */
}

---

I can tell you I am using just a single breakpoint at 768 - that is min-width: 768px to serve tablets and desktops, and max-width: 767px to serve phones.

I haven't looked back since. It makes the responsive development easy and not a chore, and provides a reasonable experience on all devices at minimal cost to development time without the need to fear a new Android device with a new resolution you haven't factored in.

---

Consider using twitter bootstrap's break points. with such a massive adoption rate you should be safe...

---

Media Queries for Standard Devices

In General for Mobile, Tablets, Desktop and Large Screens

1. Mobiles

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

    /* Styles */

    }

2. Tablets

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

         /* Styles */

    }

3. Desktops & laptops

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

    /* Styles */

}

4. Larger Screens

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

    /* Styles */

}

In Detail including landscape and portrait

/* 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 */
    }

Reference

---

@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 --- */}

---

If you go to your google analytics you can see which screen resolutions your visitors to the website use:

Audience > Technology > Browser & OS > Screen Resolution ( in the menu above the stats)

My site gets about 5,000 visitors a month and the dimensions used for the free version of responsinator.com are pretty accurate summary of my visitors' screen resolutions.

This could save you from needing to be too perfectionistic.

---

I always use Desktop first, mobile first doesn't have highest priority does it? IE< 8 will show mobile css..

normal css here: 

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

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

sometimes some custom sizes. I don't like bootstrap etc.

---

Instead of using pixels should use em or percentage as it is more adaptive and fluid, better not target devices target your content:

HTML5 rockrs read, mobile first

---

Your break points look really good. I've tried 768px on Samsung tablets and it goes beyond that, so I really like the 961px. You don't necessarily need all of them if you use responsive CSS techniques, like % width/max-width for blocks and images (text as well).

---

Keep your code clean and stylesheets logically separated per screen 'media' type config...


1) Using himansu's answer from above as a reference: Common CSS Media Queries Break Points
AND
2) https://www.w3schools.com/css/css3_mediaqueries.asp

your answer would be:

<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">

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