Как настроить таргетинг на устройства, размер которых меньше определенного размера экрана

Question

Как настроить таргетинг на устройства, размер которых меньше определенного размера экрана

0

У меня есть отзывчивая веб-страница, которая прекрасно подходит до 750px, после чего у нее возникают проблемы. Для того, чтобы он выглядел хорошо, требуется много CSS, и это довольно хакерское решение.

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

Спасибо, Иордания

user1820262 12 нояб. 2013, в 13:17

Источник

Теги:

html

css

mobile

screen

4 ответа

0

Вам нужно использовать медиа-запросы, чтобы получить то, что вы ищете.

Обратитесь к ссылке, чтобы узнать больше об этом.

Nitesh 12 нояб. 2013, в 10:48

0

Вы можете применять CSS только к определенной ширине устройства:

@media only screen and (max-width: 767px) {
    body { background-color: red; }
}

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

.phone-section { display: none }

@media only screen and (max-width: 767px) {
    .phone-section { display: block }
    .desktop-section { display: none }
}

Вот еще несколько примеров: http://www.javascriptkit.com/dhtmltutors/cssmediaqueries.shtml

Hannobo 12 нояб. 2013, в 10:46

0

Размеры экрана:

640x480 800x600 1024x768 1280x1024 (и больше)

CSS-запросы на размер экрана

Krishna 12 нояб. 2013, в 09:48

Ещё вопросы

SW4 · Accepted Answer · 2013-11-12T09-52-00.000Z

Вы можете реализовать медиа-запросы

например:

@media all and (max-width: 750px) {
/* CSS rules here for screens lower than 750px */
}
@media all and (min-width: 750px) {
/* CSS rules here for screens above 750px */
}

Также см. " Введение в медиа-запросы". Часть 1. Что такое медиа-запросы - запросы Adobe, Media - Wikipedia, свободная энциклопедия и обзор CSS3 Media Queries - CSS Media Queries