0
i m полностью новичок для отзывчивого дизайна. Мои медиа-запросы не работают. когда я изменяю размер окна, он не переделывает точку останова, я думаю. я сделал два divs, один из них для рабочего стола, а другой - для планшета. Я использую свойство display: none, чтобы иметь настольную и мобильную версию.Запросы СМИ не функционируют?
Другой вопрос: есть ли способ настроить медиа-запросы для всех мобильных устройств? или я должен писать css для каждой удобной группы inviduel? (Например, для iPhone5, iphone6, связь и т.д ..)
.tablet-view{
display: none;
}
.desktop-view{
display: inline;
}
/* ----------- iPad mini ----------- */
/* Portrait and Landscape */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (-webkit-min-device-pixel-ratio: 1) {
.desktop-view{
display:none;
}.tablet-view {
display: inline;
}
}
/* Portrait */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 1) {
.desktop-view{
display:none;
}.tablet-view {
display: inline;
}
}
/* Landscape */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 1) {
.desktop-view{
display:none;
}.tablet-view {
display: inline;
}
}
/* ----------- iPad 1 and 2 ----------- */
/* Portrait and Landscape */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (-webkit-min-device-pixel-ratio: 1) {
.desktop-view{
display:none;
}.tablet-view {
display: inline;
}
}
/* Portrait */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 1) {
.desktop-view{
display:none;
}.tablet-view {
display: inline;
}
}
/* Landscape */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 1) {
.desktop-view{
display:none;
}.tablet-view {
display: inline;
}
}
/* ----------- iPad 3 and 4 ----------- */
/* Portrait and Landscape */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (-webkit-min-device-pixel-ratio: 2) {
.desktop-view{
display:none;
}.tablet-view {
display: inline;
}
}
/* Portrait */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 2) {
.desktop-view{
display:none;
}.tablet-view {
display: inline;
}
}
/* Landscape */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 2) {
.desktop-view{
display:none;
}.tablet-view {
display: inline;
}
}
Возможный дубликат [CSS3 медиа-запросов не работает] (http://stackoverflow.com/questions/7859336/css3-media-queries-not-working) –
У меня есть в моем index.html, как он дублируется? –
Как насчет других предложений? Вы не предоставили здесь много контекста, и его трудно узнать, что это могло бы быть без всех фактов ... –