blocks|key|865770|text|这不是像素计数的问题，而是屏幕上字符的实际大小(以毫米或英寸为单位)的问题，这取决于像素密度。因此"min-width:“和"max-width:”是无用的。这个问题的完整解释在这里：what+exactly+is+device+pixel+ratio?|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|865771|"@media“查询考虑了像素数和设备像素比率，从而产生了一个”虚拟分辨率“，这是您在设计页面时必须实际考虑的内容:如果您的字体是10px固定宽度，而”虚拟水平分辨率“是300px，则将需要30个字符来填充一行。|865772|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/8785643/what-exactly-is-device-pixel-ratio^0|2K|Z|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@$A|O|B|P|1|Q]]|C|$]]|$1|D|3|E|5|6|7|R|8|@]|9|@]|C|$]]|$1|F|3|-4|5|6|7|S|8|@]|9|@]|C|$]]]|G|$H|$5|I|J|K|C|$L|M]]]]

It's not a matter of pixels count, it's a matter of actual size (in mm or inches) of characters on the screen, which depends on pixels density.
Hence "min-width:" and "max-width:" are useless.
A full explanation of this issue is here:
<a href="https://stackoverflow.com/questions/8785643/what-exactly-is-device-pixel-ratio">what exactly is device pixel ratio?</a>

"@media" queries take into account the pixels count and the device pixel ratio, resulting in a "virtual resolution" which is what you have to actually take into account while designing your page: if your font is 10px fixed-width and the "virtual horizontal resolution" is 300 px, 30 characters will be needed to fill a line.

blocks|key|865807|text|常见设备断点的媒体查询|type|unstyled|depth|inlineStyleRanges|entityRanges|data|865808|/*+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+*/
}
/**********
iPad+3
**********/
@media+only+screen+and+(min-device-width+:+768px)+and+(max-device-width+:+1024px)+and+(orientation+:+landscape)+and+(-webkit-min-device-pixel-ratio+:+2)+{
/*+Styles+*/
}

@media+only+screen+and+(min-device-width+:+768px)+and+(max-device-width+:+1024px)+and+(orientation+:+portrait)+and+(-webkit-min-device-pixel-ratio+:+2)+{
/*+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+(min-device-width+:+320px)+and+(max-device-width+:+480px)+and+(orientation+:+landscape)+and+(-webkit-min-device-pixel-ratio+:+2)+{
/*+Styles+*/
}

@media+only+screen+and+(min-device-width+:+320px)+and+(max-device-width+:+480px)+and+(orientation+:+portrait)+and+(-webkit-min-device-pixel-ratio+:+2)+{
/*+Styles+*/
}

/*+iPhone+5+-----------+*/
@media+only+screen+and+(min-device-width:+320px)+and+(max-device-height:+568px)+and+(orientation+:+landscape)+and+(-webkit-device-pixel-ratio:+2){
/*+Styles+*/
}

@media+only+screen+and+(min-device-width:+320px)+and+(max-device-height:+568px)+and+(orientation+:+portrait)+and+(-webkit-device-pixel-ratio:+2){
/*+Styles+*/
}

/*+iPhone+6+-----------+*/
@media+only+screen+and+(min-device-width:+375px)+and+(max-device-height:+667px)+and+(orientation+:+landscape)+and+(-webkit-device-pixel-ratio:+2){
/*+Styles+*/
}

@media+only+screen+and+(min-device-width:+375px)+and+(max-device-height:+667px)+and+(orientation+:+portrait)+and+(-webkit-device-pixel-ratio:+2){
/*+Styles+*/
}

/*+iPhone+6%2B+-----------+*/
@media+only+screen+and+(min-device-width:+414px)+and+(max-device-height:+736px)+and+(orientation+:+landscape)+and+(-webkit-device-pixel-ratio:+2){
/*+Styles+*/
}

@media+only+screen+and+(min-device-width:+414px)+and+(max-device-height:+736px)+and+(orientation+:+portrait)+and+(-webkit-device-pixel-ratio:+2){
/*+Styles+*/
}

/*+Samsung+Galaxy+S3+-----------+*/
@media+only+screen+and+(min-device-width:+320px)+and+(max-device-height:+640px)+and+(orientation+:+landscape)+and+(-webkit-device-pixel-ratio:+2){
/*+Styles+*/
}

@media+only+screen+and+(min-device-width:+320px)+and+(max-device-height:+640px)+and+(orientation+:+portrait)+and+(-webkit-device-pixel-ratio:+2){
/*+Styles+*/
}

/*+Samsung+Galaxy+S4+-----------+*/
@media+only+screen+and+(min-device-width:+320px)+and+(max-device-height:+640px)+and+(orientation+:+landscape)+and+(-webkit-device-pixel-ratio:+3){
/*+Styles+*/
}

@media+only+screen+and+(min-device-width:+320px)+and+(max-device-height:+640px)+and+(orientation+:+portrait)+and+(-webkit-device-pixel-ratio:+3){
/*+Styles+*/
}

/*+Samsung+Galaxy+S5+-----------+*/
@media+only+screen+and+(min-device-width:+360px)+and+(max-device-height:+640px)+and+(orientation+:+landscape)+and+(-webkit-device-pixel-ratio:+3){
/*+Styles+*/
}

@media+only+screen+and+(min-device-width:+360px)+and+(max-device-height:+640px)+and+(orientation+:+portrait)+and+(-webkit-device-pixel-ratio:+3){
/*+Styles+*/
}|code-block|syntax|javascript|865809|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<h2>Media queries for common device breakpoints</h2>

<pre><code>/* 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 */
}
/**********
iPad 3
**********/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
/* 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 (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

/* iPhone 5 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/* iPhone 6 ----------- */
@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/* iPhone 6+ ----------- */
@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/* Samsung Galaxy S3 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/* Samsung Galaxy S4 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

/* Samsung Galaxy S5 ----------- */
@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}
</code></pre>

blocks|key|648521|text|Twitter+Bootstrap推荐的最佳断点|type|unstyled|depth|inlineStyleRanges|entityRanges|data|648522|/*+Custom,+iPhone+Retina+*/+
++++@media+only+screen+and+(min-width+:+320px)+{
++++++++
++++}

++++/*+Extra+Small+Devices,+Phones+*/+
++++@media+only+screen+and+(min-width+:+480px)+{

++++}

++++/*+Small+Devices,+Tablets+*/
++++@media+only+screen+and+(min-width+:+768px)+{

++++}

++++/*+Medium+Devices,+Desktops+*/
++++@media+only+screen+and+(min-width+:+992px)+{

++++}

++++/*+Large+Devices,+Wide+Screens+*/
++++@media+only+screen+and+(min-width+:+1200px)+{

++++}|code-block|syntax|javascript|648523|来源：https://scotch.io/tutorials/default-sizes-for-twitter-bootstraps-media-queries|offset|length|648524|entityMap|0|LINK|mutability|MUTABLE|url|https://scotch.io/tutorials/default-sizes-for-twitter-bootstraps-media-queries^0|0|0|3|26|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

The best breakpoints recommended by Twitter Bootstrap
<pre><code>/* Custom, iPhone Retina */ 
 @media only screen and (min-width : 320px) {
 
 }

 /* Extra Small Devices, Phones */ 
 @media only screen and (min-width : 480px) {

 }

 /* Small Devices, Tablets */
 @media only screen and (min-width : 768px) {

 }

 /* Medium Devices, Desktops */
 @media only screen and (min-width : 992px) {

 }

 /* Large Devices, Wide Screens */
 @media only screen and (min-width : 1200px) {

 }
</code></pre>
Source: <a href="https://scotch.io/tutorials/default-sizes-for-twitter-bootstraps-media-queries" rel="noreferrer">https://scotch.io/tutorials/default-sizes-for-twitter-bootstraps-media-queries</a>

blocks|key|865871|text|现在最常见的是视网膜屏幕设备，换句话说:具有高分辨率和非常高的像素密度(但通常小于6英寸的物理尺寸)的设备。这就是为什么你需要retina在你的CSS上显示专门的媒体查询。这是我能找到的最完整的例子：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|865872|@media+only+screen+and+(min-width:+320px)+{

++/*+Small+screen,+non-retina+*/

}

@media
only+screen+and+(-webkit-min-device-pixel-ratio:+2)++++++and+(min-width:+320px),
only+screen+and+(+++min--moz-device-pixel-ratio:+2)++++++and+(min-width:+320px),
only+screen+and+(+++++-o-min-device-pixel-ratio:+2/1)++++and+(min-width:+320px),
only+screen+and+(++++++++min-device-pixel-ratio:+2)++++++and+(min-width:+320px),
only+screen+and+(++++++++++++++++min-resolution:+192dpi)+and+(min-width:+320px),
only+screen+and+(++++++++++++++++min-resolution:+2dppx)++and+(min-width:+320px)+{+

++/*+Small+screen,+retina,+stuff+to+override+above+media+query+*/

}

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

++/*+Medium+screen,+non-retina+*/

}

@media
only+screen+and+(-webkit-min-device-pixel-ratio:+2)++++++and+(min-width:+700px),
only+screen+and+(+++min--moz-device-pixel-ratio:+2)++++++and+(min-width:+700px),
only+screen+and+(+++++-o-min-device-pixel-ratio:+2/1)++++and+(min-width:+700px),
only+screen+and+(++++++++min-device-pixel-ratio:+2)++++++and+(min-width:+700px),
only+screen+and+(++++++++++++++++min-resolution:+192dpi)+and+(min-width:+700px),
only+screen+and+(++++++++++++++++min-resolution:+2dppx)++and+(min-width:+700px)+{+

++/*+Medium+screen,+retina,+stuff+to+override+above+media+query+*/

}

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

++/*+Large+screen,+non-retina+*/

}

@media
only+screen+and+(-webkit-min-device-pixel-ratio:+2)++++++and+(min-width:+1300px),
only+screen+and+(+++min--moz-device-pixel-ratio:+2)++++++and+(min-width:+1300px),
only+screen+and+(+++++-o-min-device-pixel-ratio:+2/1)++++and+(min-width:+1300px),
only+screen+and+(++++++++min-device-pixel-ratio:+2)++++++and+(min-width:+1300px),
only+screen+and+(++++++++++++++++min-resolution:+192dpi)+and+(min-width:+1300px),
only+screen+and+(++++++++++++++++min-resolution:+2dppx)++and+(min-width:+1300px)+{+

++/*+Large+screen,+retina,+stuff+to+override+above+media+query+*/

}|code-block|syntax|javascript|865873|来源：CSS-Tricks+Website|offset|length|865874|entityMap|0|LINK|mutability|MUTABLE|url|https://css-tricks.com/snippets/css/retina-display-media-query/^0|0|0|3|I|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

Nowadays the most common thing is to see retina-screen devices, in other words: devices with high resolutions and a very high pixel density (but usually smaller than 6 inches physical size). That's why you will need retina display specialized media-queries on your CSS. This is the most complete example I could find:

<pre><code>@media only screen and (min-width: 320px) {

 /* Small screen, non-retina */

}

@media
only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 320px),
only screen and ( min--moz-device-pixel-ratio: 2) and (min-width: 320px),
only screen and ( -o-min-device-pixel-ratio: 2/1) and (min-width: 320px),
only screen and ( min-device-pixel-ratio: 2) and (min-width: 320px),
only screen and ( min-resolution: 192dpi) and (min-width: 320px),
only screen and ( min-resolution: 2dppx) and (min-width: 320px) { 

 /* Small screen, retina, stuff to override above media query */

}

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

 /* Medium screen, non-retina */

}

@media
only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 700px),
only screen and ( min--moz-device-pixel-ratio: 2) and (min-width: 700px),
only screen and ( -o-min-device-pixel-ratio: 2/1) and (min-width: 700px),
only screen and ( min-device-pixel-ratio: 2) and (min-width: 700px),
only screen and ( min-resolution: 192dpi) and (min-width: 700px),
only screen and ( min-resolution: 2dppx) and (min-width: 700px) { 

 /* Medium screen, retina, stuff to override above media query */

}

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

 /* Large screen, non-retina */

}

@media
only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 1300px),
only screen and ( min--moz-device-pixel-ratio: 2) and (min-width: 1300px),
only screen and ( -o-min-device-pixel-ratio: 2/1) and (min-width: 1300px),
only screen and ( min-device-pixel-ratio: 2) and (min-width: 1300px),
only screen and ( min-resolution: 192dpi) and (min-width: 1300px),
only screen and ( min-resolution: 2dppx) and (min-width: 1300px) { 

 /* Large screen, retina, stuff to override above media query */

}
</code></pre>

Source: <a href="https://css-tricks.com/snippets/css/retina-display-media-query/" rel="noreferrer">CSS-Tricks Website</a>

blocks|key|865902|text|@media+(max-width:+767px)+++{

++++++.container{width:100%25}+*{color:green;}-Mobile

++++}


++++@media+(min-width:+768px)++{

+++++.container{width:100%25}+*{color:pink++}+-Desktop

++++}
++++@media+(min-width:+768px)+and+(orientation:portrait)++{

+++++++.container{width:100%25}+*{color:yellow++}+-Mobile

++++}
++++@media+(min-width:+1024px)++{

+++++++.container{width:100%25}+*{color:pink++}+-Desktop

++++}
++++@media+(min-width:+1200px)++{

++++.container{width:1180px}+*{color:pink+++}+-Desktop

++++}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|865903|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>@media (max-width: 767px) {

 .container{width:100%} *{color:green;}-Mobile

 }


 @media (min-width: 768px) {

 .container{width:100%} *{color:pink } -Desktop

 }
 @media (min-width: 768px) and (orientation:portrait) {

 .container{width:100%} *{color:yellow } -Mobile

 }
 @media (min-width: 1024px) {

 .container{width:100%} *{color:pink } -Desktop

 }
 @media (min-width: 1200px) {

 .container{width:1180px} *{color:pink } -Desktop

 }
</code></pre>

blocks|key|865939|text|我正在使用下面的一个来做我的工作。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|865940|/*+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+*/
}
/**********
iPad+3
**********/
@media+only+screen+and+(min-device-width+:+768px)+and+(max-device-width+:+1024px)+and+(orientation+:+landscape)+and+(-webkit-min-device-pixel-ratio+:+2)+{
/*+Styles+*/
}

@media+only+screen+and+(min-device-width+:+768px)+and+(max-device-width+:+1024px)+and+(orientation+:+portrait)+and+(-webkit-min-device-pixel-ratio+:+2)+{
/*+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+(min-device-width+:+320px)+and+(max-device-width+:+480px)+and+(orientation+:+landscape)+and+(-webkit-min-device-pixel-ratio+:+2)+{
/*+Styles+*/
}

@media+only+screen+and+(min-device-width+:+320px)+and+(max-device-width+:+480px)+and+(orientation+:+portrait)+and+(-webkit-min-device-pixel-ratio+:+2)+{
/*+Styles+*/
}

/*+iPhone+5+-----------+*/
@media+only+screen+and+(min-device-width:+320px)+and+(max-device-height:+568px)+and+(orientation+:+landscape)+and+(-webkit-device-pixel-ratio:+2){
/*+Styles+*/
}

@media+only+screen+and+(min-device-width:+320px)+and+(max-device-height:+568px)+and+(orientation+:+portrait)+and+(-webkit-device-pixel-ratio:+2){
/*+Styles+*/
}

/*+iPhone+6,+7,+8+-----------+*/
@media+only+screen+and+(min-device-width:+375px)+and+(max-device-height:+667px)+and+(orientation+:+landscape)+and+(-webkit-device-pixel-ratio:+2){
/*+Styles+*/
}

@media+only+screen+and+(min-device-width:+375px)+and+(max-device-height:+667px)+and+(orientation+:+portrait)+and+(-webkit-device-pixel-ratio:+2){
/*+Styles+*/
}

/*+iPhone+6%2B,+7%2B,+8%2B+-----------+*/
@media+only+screen+and+(min-device-width:+414px)+and+(max-device-height:+736px)+and+(orientation+:+landscape)+and+(-webkit-device-pixel-ratio:+2){
/*+Styles+*/
}

@media+only+screen+and+(min-device-width:+414px)+and+(max-device-height:+736px)+and+(orientation+:+portrait)+and+(-webkit-device-pixel-ratio:+2){
/*+Styles+*/
}

/*+iPhone+X+-----------+*/
@media+only+screen+and+(min-device-width:+375px)+and+(max-device-height:+812px)+and+(orientation+:+landscape)+and+(-webkit-device-pixel-ratio:+3){
/*+Styles+*/
}

@media+only+screen+and+(min-device-width:+375px)+and+(max-device-height:+812px)+and+(orientation+:+portrait)+and+(-webkit-device-pixel-ratio:+3){
/*+Styles+*/
}

/*+iPhone+XS+Max,+XR+-----------+*/
@media+only+screen+and+(min-device-width:+414px)+and+(max-device-height:+896px)+and+(orientation+:+landscape)+and+(-webkit-device-pixel-ratio:+3){
/*+Styles+*/
}

@media+only+screen+and+(min-device-width:+414px)+and+(max-device-height:+896px)+and+(orientation+:+portrait)+and+(-webkit-device-pixel-ratio:+3){
/*+Styles+*/
}

/*+Samsung+Galaxy+S3+-----------+*/
@media+only+screen+and+(min-device-width:+320px)+and+(max-device-height:+640px)+and+(orientation+:+landscape)+and+(-webkit-device-pixel-ratio:+2){
/*+Styles+*/
}

@media+only+screen+and+(min-device-width:+320px)+and+(max-device-height:+640px)+and+(orientation+:+portrait)+and+(-webkit-device-pixel-ratio:+2){
/*+Styles+*/
}

/*+Samsung+Galaxy+S4+-----------+*/
@media+only+screen+and+(min-device-width:+320px)+and+(max-device-height:+640px)+and+(orientation+:+landscape)+and+(-webkit-device-pixel-ratio:+3){
/*+Styles+*/
}

@media+only+screen+and+(min-device-width:+320px)+and+(max-device-height:+640px)+and+(orientation+:+portrait)+and+(-webkit-device-pixel-ratio:+3){
/*+Styles+*/
}

/*+Samsung+Galaxy+S5+-----------+*/
@media+only+screen+and+(min-device-width:+360px)+and+(max-device-height:+640px)+and+(orientation+:+landscape)+and+(-webkit-device-pixel-ratio:+3){
/*+Styles+*/
}

@media+only+screen+and+(min-device-width:+360px)+and+(max-device-height:+640px)+and+(orientation+:+portrait)+and+(-webkit-device-pixel-ratio:+3){
/*+Styles+*/
}|code-block|syntax|javascript|865941|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

I am using following one to do my job.

<pre><code>/* 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 */
}
/**********
iPad 3
**********/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
/* 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 (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

/* iPhone 5 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/* iPhone 6, 7, 8 ----------- */
@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/* iPhone 6+, 7+, 8+ ----------- */
@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/* iPhone X ----------- */
@media only screen and (min-device-width: 375px) and (max-device-height: 812px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

@media only screen and (min-device-width: 375px) and (max-device-height: 812px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

/* iPhone XS Max, XR ----------- */
@media only screen and (min-device-width: 414px) and (max-device-height: 896px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

@media only screen and (min-device-width: 414px) and (max-device-height: 896px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

/* Samsung Galaxy S3 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/* Samsung Galaxy S4 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

/* Samsung Galaxy S5 ----------- */
@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}
</code></pre>

blocks|key|865969|text|对我来说，检测设备是否是移动设备是最好的解决方案：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|865970|@media+(pointer:none),+(pointer:coarse)+{
}|code-block|syntax|javascript|865971|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Best solution for me, detecting if a device is mobile or not:
<pre><code>@media (pointer:none), (pointer:coarse) {
}
</code></pre>

blocks|key|866023|text|$xs+:+"extra-small";
$s++:+"small";
$m++:+"medium";
$l++:+"large";
$xl+:+"extra-large";

@mixin+respond($breakpoint)+{
++@if($breakpoint+==+$xs)++{
++++@media+only+screen+and+(min-width:+320px)+and+(max-width:+479px)+{+@content;+}
++}
++@if($breakpoint+==+$s)++{
++++@media+only+screen+and+(min-width:+480px)+and+(max-width:+767px)+{+@content;+}
++}
++@if($breakpoint+==+$m)++{
++++@media+only+screen+and+(min-width:+768px)+and+(max-width:+991px)+{+@content;+}
++}
++@if($breakpoint+==+$l)++{
++++@media+only+screen+and+(min-width:+992px)+and+(max-width:+1199px)+{+@content;+}
++}
++@if($breakpoint+==+$xl)++{
++++@media+only+screen+and+(min-width:+1200px)+{+@content;+}
++}
}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|866024|你也可以为小于320px的屏幕再添加一个，比如Galaxy+fold|unstyled|866025|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|J|8|@]|9|@]|A|$]]|$1|G|3|-4|5|F|7|K|8|@]|9|@]|A|$]]]|H|$]]

<pre><code>$xs : &quot;extra-small&quot;;
$s : &quot;small&quot;;
$m : &quot;medium&quot;;
$l : &quot;large&quot;;
$xl : &quot;extra-large&quot;;

@mixin respond($breakpoint) {
 @if($breakpoint == $xs) {
 @media only screen and (min-width: 320px) and (max-width: 479px) { @content; }
 }
 @if($breakpoint == $s) {
 @media only screen and (min-width: 480px) and (max-width: 767px) { @content; }
 }
 @if($breakpoint == $m) {
 @media only screen and (min-width: 768px) and (max-width: 991px) { @content; }
 }
 @if($breakpoint == $l) {
 @media only screen and (min-width: 992px) and (max-width: 1199px) { @content; }
 }
 @if($breakpoint == $xl) {
 @media only screen and (min-width: 1200px) { @content; }
 }
}
</code></pre>
you can also add one more for for sceen smaller then 320px like Galaxy fold

blocks|key|866096|text|这不仅仅是分辨率的问题，你还需要找到设备的DPR：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|866097|设备像素比率(+whatismyscreenresolution+)是设备制造商给出的一个数字，它用于HiDPI(每英寸高点数)或视网膜(苹果的商标)显示器。|offset|length|866098|媒体查询示例：(最小分辨率:+3.0dppx)|866099|entityMap|0|LINK|mutability|MUTABLE|url|https://screenresolutiontest.com/^0|0|8|O|0|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Q|8|@]|9|@$D|R|E|S|1|T]]|A|$]]|$1|F|3|G|5|6|7|U|8|@]|9|@]|A|$]]|$1|H|3|-4|5|6|7|V|8|@]|9|@]|A|$]]]|I|$J|$5|K|L|M|A|$N|O]]]]

It's not just about resolution, you also need to find DPR of the device: 
<a href="https://screenresolutiontest.com" rel="nofollow noreferrer">whatismyscreenresolution</a>
&quot;Device Pixel Ratio(DPR) is a number given by device manufacturers and it's used for HiDPI(High Dots Per Inch) or Retina(Apple's trademark) displays&quot;
Media query example: (min-resolution: 3.0dppx)

I have been doing some research on media queries and I still don't quite understand how to target devices of certain sizes. 

I want to be able to target desktop, tablet and mobile. I know that there will be some discrepancies but it would be nice to have a generic system that can be used to target these devices. 

Some examples I have found:

<pre><code># Mobile
only screen and (min-width: 480px)

# Tablet
only screen and (min-width: 768px) 

# Desktop
only screen and (min-width: 992px)

# Huge
only screen and (min-width: 1280px) 
</code></pre>

Or:

<pre><code># Phone
only screen and (max-width:320px)

# Tablet
only screen and (min-width:321px) and (max-width:768px)

# Desktop
only screen and (min-width:769px)
</code></pre>

What should the breakpoints be for each device?

Media Queries: How to target desktop, tablet, and mobile?

我一直在做一些关于媒体查询的研究，但我仍然不太明白如何定位特定大小的设备。我希望能够瞄准台式机、平板电脑和移动设备。我知道会有一些差异，但如果能有一个通用的系统来针对这些设备，那就太好了。我发现了一些例子：# Mobileonly screen and (min-width: 480px)# Tabletonly sc...

问媒体查询:如何定位台式机、平板电脑和移动设备？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问媒体查询:如何定位台式机、平板电脑和移动设备？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问媒体查询:如何定位台式机、平板电脑和移动设备？
EN