Лучше положить лед обратно в морозилку. Наша работа явно еще очень далека от завершения. Созданная нами страница выглядит просто ужасно на моем iPhone в области просмотра шириной 320 пикселов. Наш медиазапрос делает именно то, что должен, применяя стили в зависимости от характеристик конкретного устройства. Однако проблема заключается в том, что он охватывает очень узкий диапазон областей просмотра. На экране любого устройства с областью просмотра шириной менее 768 пикселов содержимое будет обрезаться, как и на экране с областью просмотра шириной от 768 до 960 пикселов, поскольку в этом случае начнет задействоваться версия CSS-стилей, не связанных с медиазапросами. А как мы уже знаем, они не применяются, когда ширина области просмотра оказывается менее 960 пикселов (здесь я хватаюсь за голову и тяжело вздыхаю).
Нам необходим «резиновый» макет. Использование одних лишь медиазапросов для изменения дизайна — прекрасное решение, если у нас имеется конкретное, известное целевое устройство. Мы уже видели, насколько легко приспособить дизайн, чтобы он корректно отображался на экране iPad. Однако у такой стратегии есть серьезный недостаток, который заключается в том, что она не ориентирована на будущее, то есть может потерять свою актуальность. Сейчас при изменении размера нашей области просмотра дизайн достигает точки, когда в дело вступают соответствующие медиазапросы и конфигурация нашего макета изменяется. Однако затем он остается статичным до тех пор, пока не будет достигнута следующая контрольная точка, связанная с областью просмотра. Нам требуется нечто более подходящее, чем данное решение.
Добавление CSS-стилей, характерных для каждого конкретного изменения размеров области просмотра, не делает поправку на будущие устройства, а по-настоящему хорошим является тот дизайн, в который закладываются функции, ориентированные на будущее. На данном этапе наше решение является неполноценным. У нас получился скорее «настраиваемый» дизайн, нежели действительно адаптивный, к которому мы стремимся. Нам необходимо, чтобы дизайн проявлял гибкость до достижения следующей контрольной точки. Для этого нам потребуется перейти от жесткого, фиксированного макета к «резиновому».
Резюме..
В этой главе мы выяснили, что собой представляют CSS3-медиазапросы, как включать их в CSS-файлы и как они могут помочь нам в стремлении создать адаптивный веб-дизайн. Мы также узнали, как заставить современные мобильные браузеры обрабатывать веб-страницы в такой же манере, как это делают их настольные аналоги, и вкратце поговорили о необходимости принимать во внимание принцип «сначала содержимое» при структурировании разметки. Кроме того, мы рассмотрели
Способ, как сократить объем данных, наиболее экономичным путем используя в дизайне изображения.
Мы также выяснили, что медиазапросы могут обеспечивать лишь «настраиваемый» веб-дизайн, а не по-настоящему адаптивный. Медиазапросы — это существенный компонент адаптивного веб-дизайна, однако не менее важным является «резиновый» макет, позволяющий дизайну проявлять гибкость между контрольными точками, обрабатываемыми медиазапросами. В следующей главе мы поговорим о создании гибкой основы для нашего макета, пытаясь сделать плавными переходы между контрольными точками наших медиазапросов.
Добавить комментарий