Разработка адаптивного веб-сайта, независимо от разрешения устройства

Question

Я очень новичок в разработке веб-интерфейсов, и я пытаюсь разработать отзывчивый веб-сайт. Я решил использовать 5 точек останова, т. Е. Мобильный (2-портретный) с 320px-768px, планшеты (2-портрет-пейзаж) от 769px-1024px, Desktop-Small от 1025px-1280px, Desktop-Medium от 1281px-1366px, Рабочий стол - большой от 1367px-1680px и Desktop-ExtraLarge от 1681px-выше.

Когда я проверил мой первый макет, разработанный на Mac-Retina-13" , сайт выглядел достаточно хорошо на Safari & Chrome. Но, он полностью был искажен на Acer-Windows-15" , на Firefox & Chrome ,

Затем с некоторыми исследованиями я узнал о 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 и вставьте весь свой код в открывшееся окно спуска. Если вы используете код 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) 
 
{ }