-2
私はウェブフロントエンドの開発には非常に新しく、レスポンシブウェブサイトを開発しようとしています。 320px-768pxのモバイル（2ポートレートの風景）、769px-1024pxのタブレット（2ポートレートの風景）、1025px-1280pxのデスクトップ小、1281px-1366pxのデスクトップミディアム、 1367px-1680pxのデスクトップ大、1681px以上のデスクトップのExtraLarge。デバイスの解像度とは無関係に応答性の高いWebサイトを開発する
私は、Mac-網膜-13" 上で開発された私の最初のレイアウトをテストしたときのFirefox & Chromeで、サイトはSafariの& Chromeで合理的に大丈夫に見えた。しかし、それは完全にエイサーのWindows-15" に歪んでしまいました。
私はいくつかの研究をして、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) {
}
これらのメディアクエリを使用する必要がありますか？私はどこかで間違っていますか？
ここで所望の出力のサンプルがResponsive Site Layout
を使うのか？ –
私が気づいている[レイアウト]（https://i.stack.imgur.com/EpLMA.jpg）を見てください。ブートストラップでこれを作成できますか？ –
私はそれが解決できると思います。 （私は確信していません！）しかし、絵のフレームはかなり奇妙にぶら下がっています。 –