-1
Я всегда возвращаюсь к тому же вопросу при разработке веб-сайта для всех устройств.Полный отзывчивый веб-сайт против медиа-запросов
Имеет ли смысл делать все возможное, настраивая все значения в процентах или запрашивая несколько максимальных и минимальных значений с помощью css3, чтобы вы могли иметь свой обычный веб-сайт с 960px и размер его для разных устройства ..
для CSS3 mediaqueries я бы использовать что-то вроде этого:
/* CSS */
/* Basic responsive */
@media screen and (max-width: 960px) {
/* ..custom CSS for viewports less than 960 here */
header { /*...*/ }
section { /*...*/ }
footer { /*...*/ }
/* etc.. */
}
/* iPads (portrait) and similar tablets */
@media only screen
and (min-device-width : 768px) {
header { /*...*/ }
section { /*...*/ }
footer { /*...*/ }
/* etc.. */
}
/* Smartphones */
@media only screen and (max-device-width : 480px) {
header { /*...*/ }
section { /*...*/ }
footer { /*...*/ }
/* etc.. */
}
спасибо
+1: clean explain :) – NoobEditor
Не изменилось бы это, если бы я хотел разработать приложение html5 только для планшетов и смартфонов? Я думаю, что гораздо сложнее запросить все размеры дисплея, чем просто сделать это в процентах. –
Вам не нужно будет запрашивать каждое устройство по отдельности. Вы потенциально могли бы создать отзывчивый сайт, который работал бы на всем, начиная с широкоэкранного просмотра шириной 200 пикселей и шириной до 1500 пикселей с 3 или 4 медиа-запросами. Сколько медиа-запросов вам нужно использовать, определяется большей сложностью макета, чем количеством устройств, для которых он будет обслуживать.Не думайте с точки зрения использования процентов или медиа-запросов, они работают вместе. I. Столбец 20% становится слишком маленьким на мобильном телефоне, поэтому вы используете медиа-запрос, чтобы сделать его 100%, чтобы он стекался под основным контентом или вы могли полностью его скрыть. – jd182