Могу ли я использовать эти спецификации @media?

Question

Я пытаюсь построить свой первый отзывчивый веб-сайт. Я задаюсь вопросом, могу ли я использовать следующий код:

В голове HTML:

< meta name="viewport" content="width=device-width, initial-scale=1.0"> 

В одном CSS:

@media only screen and (max-device-width : 480px) {} 
@media only screen and (min-device-width : 480px) and (max-device-width : 960px) {} 

Это было бы для 3-х типов устройств. Все с большим разрешением, чем 960px, имеет третью спецификацию, не указанную @media. Я вырубаю:

@media only screen and (min-device-width : 960px) {} 

В порядке ли?

Могу ли я упростить код, используя только:

@media only screen and (max-device-width : 480px) {} 

Потому что я думаю, что таблетки и ПК версия будет очень похожи. Итак, вопрос в том, нужен ли мне 3 @media или я могу использовать только 1 @media & все, что не указано в @media для ПК или планшета?

Заранее благодарен!

Answer 1

Каждое правило таблицы стилей, которая является не вложен в медиа-запросов используется на всех устройствах .

Вы можете использовать @media only screen and (max-device-width : 480px) {} и устанавливать все правила там, которые должны применяться для устройств с максимальной шириной устройства: 480 пикселей.

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

Для более подробной информации я использую эти таблицы стилей для своих проектов, которые я нашел в Интернете (я не совсем уверен, где я его нашел, поэтому, если кто-то знает, что я добавлю кредиты). Они, как представляется, наиболее точные медиа-запросы:

/* 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 */ 
} 
/********** 
iPad 3 
**********/ 
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) { 
/* Styles */ 
} 

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) { 
/* 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 (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) { 
/* Styles */ 
} 

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) { 
/* Styles */ 
} 

Answer 2

@media только экран и (максимизаторами устройства ширина: 480px) {} только @media экрана и (мин- устройства ширина: 481px) и (max- ширина устройства: 960px) {}

Минимальная ширина устройства должна иметь пиксель больше ширины максимального устройства, как исправлено выше. Elseb, когда ширина экрана составляет 480 пикселей, будет конфликтовать, а второе первое условие будет переопределено вторым условием. Это означает, что он отобразит дизайн ПК для разрешения экрана 480 пикселей, который является мобильным устройством. Надеюсь, это поможет.