Отзывчивый дизайн

Question

Есть ли у нас стандартные размеры для отзывчивого дизайна. Вообще-то я думал, что это будет размер для мобильных телефонов, планшета, iPad, ноутбука, рабочего стола. Но теперь у меня так много проблем с моими клиентами, что они жалуются на то, что дизайн не очень хорош в 4,5-дюймовом экране, а дизайн не очень хорош в Samsung note mobile и т. Д. Является ли это моей ошибкой? Имеем ли мы стандартные размеры для реагирования . design.So, что я могу объяснить, что мои клиент Пожалуйста, предложите

Answer 1

Я всегда начиная с этим шаблоном mediaquery:..

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

Answer 2

может быть, вы могли бы рассмотреть возможность использования Restive Plugin Он построен, чтобы решить вид вызов с созданием веб-сайтов для нескольких устройств.

Вы также можете ознакомиться с Getting Started with Restive Plugin blog post, в котором содержится введение в то, как использовать его в реальном сценарии веб-дизайна.

Полное раскрытие информации: Я разработал плагин.

Answer 3

Если вы используете Bootstrap, тогда возникнет проблема, она будет автоматически настраиваться на всех мобильных устройствах и разрешении.

Перейдите по этой ссылке и загрузите bootstrap, и вы получите загрузочный файл css и js, который будет работать в вашем приложении или в Интернете.

http://getbootstrap.com/getting-started/#download

Используйте это будет работать должным образом, если вам нужна любая помощь, то спросите мне

Благодарности

Answer 4

Там нет стандартных реальных размеров для адаптивного дизайна. Лучший способ - это дизайн для вашего контента, а не для устройств. И дизайн мобильного - первый.

По умолчанию для мобильных устройств по умолчанию CSS будет автоматически нацелен на меньшие экраны, а оттуда создаст то, что вам нужно для более крупных экранов.

И развитие мудрого, используйте @min-width(insert px), чтобы создать свой стиль в мобильном режиме.