Запрос СМИ для всех устройств

Question

Есть ли мультимедийный запрос, который охватывает все устройства, поскольку все, что я могу найти в Интернете, и когда исследуются медиа-запросы для определенных устройств? Я могу создавать медиа-запросы для множества устройств, специфичных для устройств, однако я надеялся, что есть общий запрос на медиа, который охватывает все устройства. Пока я создал медиа-запрос для ipad, как вы можете видеть ниже.

@media only screen and (device-width: 768px) { 
    #menu { 
    font-weight: 400; 
    display: table; 
    list-style: none; 
    top: 60px; 
    text-align: center; 
    left: -10px; 
    -webkit-box-shadow: 0px 3px 5px 0px rgba(50, 50, 50, 0.75); 
    -moz-box-shadow: 0px 3px 5px 0px rgba(50, 50, 50, 0.75); 
    box-shadow: 0px 3px 5px 0px rgba(50, 50, 50, 0.75); 
    font-size: 18px; 
    height: 20px; 
    z-index: 1101; 
    position: fixed; 
    width: 100%; 
    } 
    #apDiv2 { 
    width: 100%; 
    height: 70px; 
    top: 0px; 
    color: #000000; 
    background-color: #0263B5; 
    left: 0; 
    } 
} 

Answer 1

Укладка, которая относится ко всем устройствам, не должна быть помещена внутри медиа-запроса вообще. Он должен быть помещен либо до, либо после запроса на медиа (или запросов).

Edit:

Например, если (например) ваш #menu идентификатор является одинаковым для всех устройств, но ваш #apDiv2 идентификатор необходим конкретный стиль для IPad, то это как бы вы изменить СМЧ:

#menu { 
    font-weight: 400; 
    display: table; 
    list-style: none; 
    top: 60px; 
    text-align: center; 
    left: -10px; 
    -webkit-box-shadow: 0px 3px 5px 0px rgba(50, 50, 50, 0.75); 
    -moz-box-shadow: 0px 3px 5px 0px rgba(50, 50, 50, 0.75); 
    box-shadow: 0px 3px 5px 0px rgba(50, 50, 50, 0.75); 
    font-size: 18px; 
    height: 20px; 
    z-index: 1101; 
    position: fixed; 
    width: 100%; 
} 

@media only screen and (device-width: 768px) { 
    #apDiv2 { 
    width: 100%; 
    height: 70px; 
    top: 0px; 
    color: #000000; 
    background-color: #0263B5; 
    left: 0; 
    } 
} 

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

#menu { 
    font-weight: 400; 
    display: table; 
    list-style: none; 
    text-align: center; 
    -webkit-box-shadow: 0px 3px 5px 0px rgba(50, 50, 50, 0.75); 
    -moz-box-shadow: 0px 3px 5px 0px rgba(50, 50, 50, 0.75); 
    box-shadow: 0px 3px 5px 0px rgba(50, 50, 50, 0.75); 
    font-size: 18px; 
    z-index: 1101; 
    position: fixed; 
} 
#apDiv2 { 
    color: #000000; 
    background-color: #0263B5; 
} 

@media only screen and (device-width: 768px) { 
    #menu { 
    top: 60px; 
    left: -10px; 
    height: 20px; 
    width: 100%; 
    } 
    #apDiv2 { 
    width: 100%; 
    height: 70px; 
    top: 0px; 
    left: 0; 
    } 
}