отзывчивый дизайн для сайтов с использованием css

Question

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

1. Desktop: все универсальные стили
2. таблетки: @media (мин-ширина: 768px) и (макс-ширина: 991px) {мои стили}
3. Мобильные телефоны: @media (мин-ширина: 320px) и (макс-ширина: 480px) {моих стили}

будет ли он полностью отзывчивый и поддержка всех стандартных устройства или сделать я должен сделать еще несколько изменений? Здесь ВСЕ означает буквально все устройства.

Answer 1

Вы должны не оставлять пробелы между 481 и 766, а также между 0 до 319 пикс. Это не очень отзывчиво.

@media screen and (max-device-width:480px){ // styles for mobile} 
@media screen and (max-device-width:780px){ // styles for tablets} 
@media screen and (min-device-width:781px){ // styles for desktop} 

EDIT Есть меньше, чем Одежда с символикой 319 пикс. Пример:

/* ----------- Moto 360 Watch ----------- */ 
@media 
    (max-device-width: 218px) 
    and (max-device-height: 281px) { 

} 

Там должны быть там некоторые устройства между 481 и 766.

Answer 2

Если вы считаете отзывчивым простым, я плохо себя чувствую для вас, сын. У нас есть 99 видовых экранов, но iPhone только один.

Вот список Media Queries for Standard Devices

Answer 3

Что почти все ошибались в том, что адаптивный дизайн должно быть сделано на основе некоторых предопределенных точек останова. Он должен определять ваш контент, а не экран вашего посетителя. Если есть 10 контрольных точек, в структуре сайта есть что-то определенно неправильное. Меньше медиа-запросов = лучше. Начните оттуда и завершите идеальную структуру для своего контента для ЛЮБОГО экрана.