我对网络前端开发非常陌生，我正在努力开发一个响应式网站。我决定了5个断点，即320px-768px的移动（2个肖像景观），769px-1024px的平板电脑（2个肖像景观），1025px-1280px的桌面小型，1281px-1366px的桌面式桌面大型从1367px-1680px和Desktop-ExtraLarge从1681px-Above。
当我测试我的第一个版面，在Mac-Retina-13＆＃34;上开发时，该网站在Safari＆amp; amp;铬。但是，它完全在Acer-Windows-15＆＃34;上被扭曲，在Firefox＆amp;铬。
然后通过一些研究我了解了http://mydevice.io/和设备像素比率。
我想知道，为了获得一致的观看体验，无论设备分辨率如何，都要跨设备。屏幕尺寸，我将使用以下媒体查询吗？
/* Phones - portait */
@media only screen and (min-width: 320px) and (max-width: 768px) and (orientation: portrait) and (min-resolution: 96dpi) {
}
@media only screen and (min-width: 320px) and (max-width: 768px) and (orientation: portrait) and (min-resolution: 144dpi){
}
@media only screen and (min-width: 320px) and (max-width: 768px) and (orientation: portrait) and (min-resolution: 192dpi){
}
@media only screen and (min-width: 320px) and (max-width: 768px) and (orientation: portrait) and (min-resolution: 288dpi){
}
@media only screen and (min-width: 320px) and (max-width: 768px) and (orientation: portrait) and (min-resolution: 384dpi){
}
/* Phones - landscape */
@media only screen and (min-width: 320px) and (max-width: 768px) and (orientation: landscape) and (min-resolution: 96dpi) {
}
@media only screen and (min-width: 320px) and (max-width: 768px) and (orientation: landscape) and (min-resolution: 144dpi) {
}
@media only screen and (min-width: 320px) and (max-width: 768px) and (orientation: landscape) and (min-resolution: 192dpi) {
}
@media only screen and (min-width: 320px) and (max-width: 768px) and (orientation: landscape) and (min-resolution: 192dpi) {
}
@media only screen and (min-width: 320px) and (max-width: 768px) and (orientation: landscape) and (min-resolution: 288dpi) {
}
@media only screen and (min-width: 320px) and (max-width: 768px) and (orientation: landscape) and (min-resolution: 384dpi) {
}
/* Tablets - Portrait */
@media only screen and (min-width: 769px) and (max-width: 1024px) and (orientation: portrait) and (min-resolution: 96dpi) {
}
@media only screen and (min-width: 769px) and (max-width: 1024px) and (orientation: portrait) and (min-resolution: 192dpi) {
}
/* Tablets - Landscape */
@media only screen and (min-width: 769px) and (max-width: 1024px) and (orientation: landscape) and (min-resolution: 96dpi) {
}
@media only screen and (min-width: 769px) and (max-width: 1024px) and (orientation: landscape) and (min-resolution: 192dpi) {
}
/* Desktop - Small */
@media only screen and (min-width: 1025px) and (max-width: 1280px) and (min-resolution: 96dpi) {
}
@media only screen and (min-width: 1025px) and (max-width: 1280px) and (min-resolution: 192dpi) {
}
/* Desktop - Medium */
@media only screen and (min-width: 1281px) and (max-width: 1366px) and (min-resolution: 96dpi) {
}
@media only screen and (min-width: 1281px) and (max-width: 1366px) and (min-resolution: 192dpi) {
}
/* Desktop - Large */
@media only screen and (min-width: 1367px) and (max-width: 1680px) and (min-resolution: 96dpi) {
}
@media only screen and (min-width: 1367px) and (max-width: 1680px) and (min-resolution: 192dpi) {
}
/* Desktop - ExtraLarge */
@media only screen and (min-width: 1681px) and (min-resolution: 96dpi) {
}
@media only screen and (min-width: 1681px) and (min-resolution: 192dpi) {
}
我是否必须使用这23个媒体查询？我在某个地方出错了吗？
这是所需输出Responsive Site Layout
的示例答案 0 :(得分：0)
您可以使用您的代码发布指向该网站的链接或指向jfiiddle的链接吗？或编辑您的问题，然后点击CTRL + M并将所有代码粘贴到打开的snipet框中？如果您使用Bootstrap代码，您的网站将具有移动响应能力。如果您自己编码，请使用这些http://codepen.io/mlegg10/pen/JKdOaj
/* 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 */
}
/* iPhone 6 landscape */
@media only screen and (min-device-width: 375px)
and (max-device-width: 667px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 2)
{ }
/* iPhone 6 portrait */
@media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 2)
{ }
/* iPhone 6 Plus landscape */
@media only screen
and (min-device-width: 414px)
and (max-device-width: 736px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 3)
{ }
/* iPhone 6 Plus portrait */
@media only screen
and (min-device-width: 414px)
and (max-device-width: 736px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 3)
{ }
/* iPhone 6 and 6 Plus */
@media only screen
and (max-device-width: 640px),
only screen and (max-device-width: 667px),
only screen and (max-width: 480px)
{ }
/* Apple Watch */
@media
(max-device-width: 42mm)
and (min-device-width: 38mm)
{ }