開發響應式網站，獨立於設備分辨率

Question

我對網絡前端開發非常陌生，我試圖開發一個響應式網站。我已經決定了5個斷點，即320px-768px的移動（2-portrait-landscape），769px-1024px的2-portrait-landscape，1025px-1280px的Desktop-Small，1281px-1366px的Desktop-Medium， Desktop-Large從1367px-1680px和Desktop-ExtraLarge從1681px-Above。

當我測試了我的第一個佈局，在Mac視網膜-13" 研製的，該網站看起來在Safari &鉻相當不錯。但是，這完全得到了歪曲上Acer的Windows的15" ，在Firefox &鉻。

然後通過一些研究，我瞭解了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

Answer 1

您可以發佈一個鏈接到的網站或鏈接到一個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) 
 
{ }