Это другой взгляд на Отзывчивый веб-дизайн.В этой статье рассматривается, как мы можем лучше принять то, что веб-о, игнорируя большой слон в комнате, то есть, как мы можем полагаться на запросы средств массовой информации и точки останова, не заботясь о devices.
Challenge
Let’ начнем наше путешествие, глядя на эти онлайновые инструменты:
Эти страницы позволяют людям проверить веб-сайты с помощью набора готовых представлений, основанных на различных размеров устройства или ориентации. Bricss идет на один шаг дальше, как это позволяет " customize" видовых путем установки любых размеров вы want.
Теперь проверьте -пра-планшет поток 2011.
Вы получаете мой дрейф?Попытка проверить макеты в отношении конкретных наборов измерений является проигранная битва.Кроме того, использование существующих устройств для установки точки останова не то, что I’ D вызовов " будущем proof" подход, так как нет стандартных размеров или ratios.
I don’ т хотят идти " считаю, что это harmful " маршруту, но я хочу отметить, что инструменты, такие как эти, или статьи содействие устройству подход (т.е. Устройство Схема реагирования DesignPlanning), чтобы люди сосредоточены на том конце проблеме, усиливая мысль, что responsive все о devices.
Для меня это кажется более реалистичным, чтобы проверить наши макеты через видовых экранах любых размеров и форм.Мы don’ т нужно ничего фантазии, мы можем просто перетащить в правом нижнем углу нашего любимого настольного браузера ввести:. “ Устройство Агностик Mode”
Goal
Цель состоит в том, чтобы поверхность содержания, стиля коробки, как столбцы таким образом, они приносят разделах выше раза.Вопрос в том, когда мы должны принести коробку " up"
?
Содержание короля
Если учесть, что содержание короля, то имеет смысл смотреть на это как краеугольный камень решения.Другими словами, мы должны установить точки останова в соответствии с content вместо devices.
Principle
Содержание коробки dictates его ширины.Это минимальная ширина соседние контейнеры, которые создают точек останова (размер, при котором мы можем увидеть флажки рядом друг с другом).
Решения принимаются Учитывая эти моменты в виду:
-
Ширина окна должна быть мала или как можно шире без ущербачитаемость.
-
Макс-ширина окна должна принимать во внимание важность следующих полей.Это потому, что чем шире окно, тем шире должны быть окна, чтобы показать последующих окнах.
-
Цель состоит в том not довести все выше раза (мы don’ т хотим, чтобы заполнить просмотра с беспорядком).
В Practice
Markup
В этом упражнении мы рассмотрим 5 основных блоков:
<div class="grid-block" id="header"></div>
<div id="wrapper">
<div class="grid-block" id="main"></div>
<div class="grid-block" id="complementary"></div>
<div class="grid-block" id="aside"></div>
</div>
<div class="grid-block" id="contentinfo"></div>
Оболочка позволит:
- MIX проценты и пиксели в стиле коробки на той же row
- Установить максимальную ширину для группы boxes
CSS
Для создания нашей сетке мы будем полагаться на display:inline-block главным образом для выравнивания по горизонтали и встроенные потока.Но обратите внимание, что этот выбор также дает нам дополнительные преимущества, чтобы играть с (подробнее об этом позже).
Также обратите внимание, что мы будем переопределить этот стиль с float для достижения некоторых конкретных макетов.
body {
margin:auto; /* you'll see why later */
text-align:center; /* to center align grid boxes */
letter-spacing: -0.31em;/* webkit: collapse white-space between units */
*letter-spacing: normal;/* reset IE < 8 */
word-spacing: -0.43em; /* IE < 8 && gecko: collapse white-space between units */
}
.grid-block {
letter-spacing: normal; /* reset */
word-spacing: normal; /* reset */
text-align:left; /* reset */
display:inline-block; /* styling all grid-wrapper as inline blocks */
vertical-align:top; /* aligning those boxes at the top */
*display:inline; /* IE hack to mimic inline-block */
zoom:1; /* part of the above hack for IE */
width:100%; /* boxes would shrink-wrap */
}
/**
* rules below are meant to paint the boxes
*/
.grid-block {
height: 150px;
}
#header {
background: #d6cac1;
}
#main {
background: #ad9684;
}
#complementary {
background: #7a6351;
}
#aside {
background: #000000;
}
#contentinfo {
background: #3d3128;
}
Это создает кучей rows.
Content-Driven Process
Мы определяем ширину каждого окна в соответствии с его содержанием.Эти значения будут в дальнейшем использоваться для установки точек останова.Обратите внимание, что значения ниже учитывать 10px желоб между колоннами.
- Header
- Содержание: логотип, навигация, поиск box
- Тип: banner
- Минимальная ширина: n/a
- Максимальная ширина: n/a
- Main
- Содержание: разнообразные (статьи, блоги, записи, комментарии и т.д.)
- Тип: главное окно, которое содержит мясо page
- Минимальная ширина: 420px [ 1]
- Максимальная ширина: 550px [ 1]
- Complementary
- Содержания: каталог записей, чириканье, etc.
- Тип: многоканальный текстовое поле с media
- Минимальная ширина: 280px
- Максимальная ширина: 380px
- Aside
- Содержания: Ads
- Тип: 230px широкий images
- Фиксированная ширина: 250px или 490px (2 объявления рядом)
- Contentinfo
- Содержания: ресурсы, блог ролл, etc.
- Тип: списки links
- Минимальная ширина: 220px
- Максимальная ширина: 280px
Минимальная и максимальная ширина выше, только вступают в игру, когда окно отображается в виде столбца.
Breakpoints
Ширина контейнеров устанавливает наши точки останова.Точки останова viewport’ с шириной, на которой мы решили отобразить окно в виде столбца (а не подряд).
Как мы " Pick" Breakpoints?
Пока мы не можем использовать что-то вроде Сетки layout, мы застряли в значительной степени с HTML потока, и таким образом должны изменить коробки при уважении их исходном порядке.Таким образом, мы спускаемся нашем списке, и на основе минимальных значений ширины, мы создаем различные комбинации.Значения ниже, показывают, ширины, на которых мы изменить макет, сти …
Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров