常见的CSS媒体查询中断点

我正在使用CSS媒体查询处理响应式网站.

以下是设备的良好组织吗？电话,Ipad(风景和肖像),桌面和笔记本电脑,大屏幕

什么是常见的媒体查询断点值？

我打算使用以下断点:

320:智能手机肖像

481:智能手机景观

641或768 ???:IPad Portrait ???

961:iPad风景/小笔记本电脑???

1025:台式机和笔记本电脑

1281:宽屏幕

你怎么看？我有几个疑问？点.

1> ralph.m..：

---

而不是尝试在特定设备上定位@media规则,而是将它们建立在您的特定布局上更为实际.也就是说,逐渐缩小桌面浏览器窗口并观察内容的自然断点.每个网站都有所不同.只要设计在每个浏览器宽度上都能很好地流动,它就可以在任何屏幕尺寸上非常可靠地工作(并且那里有很多很多.)

---

正如我所提到的,如果你试图追逐屏幕尺寸,你将会不堪重负,因为它们中有很多.让您的布局决定断点所需的位置.您可能只需要一两个.:)

---

这是现场,应该是接受的答案.屏幕尺寸没有"常见".

---

这里有一篇很棒的文章,概述了为什么这是一个解决问题的方法,以及如何处理多设备css:http://bradfrostweb.com/blog/post/7-habits-of-highly-effective-media-queries /

2> boz..：

---

我一直在用:

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

它使事情变得相对简单,并允许你在肖像模式下为手机做一些不同的事情(很多时候我发现自己必须为它们改变各种元素).

3> Adrian P...：

---

我使用了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) {


}    

UPDATE

截至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){ ... }

---

这是否意味着你使用宽度> 1999的默认值？

4> Nur Rony..：

---

这是来自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 */
}

---

好多啊.*

5> DannyB..：

---

我可以告诉你我在768只使用一个断点 - 即为min-width: 768px平板电脑和台式机max-width: 767px提供服务,以及为手机提供服务.

从那以后我没有回头.它使响应式开发变得简单而不是繁琐,并且以最低的开发时间成本为所有设备提供合理的体验,而无需担心新的Android设备具有您尚未考虑的新分辨率.

6> elewinso..：

---

考虑使用twitter bootstrap的断点.如此庞大的采用率你应该是安全的......

---

对于懒惰.<768,<992,<1200,> = 1200.

7> Suman K.C..：

---

标准设备的媒体查询

一般用于移动,平板电脑,桌面和大屏幕

1.手机

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

    /* Styles */

    }

2.平板电脑

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

         /* Styles */

    }

3.台式机和笔记本电脑

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

    /* Styles */

}

4.更大的屏幕

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

参考

8> himansu..：

---

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