Жидкость веб-designs имеют много преимуществ, но только если все сделано правильно.

При правильной технике, дизайне можно увидеть правильно на больших экранах, небольшими экранами и даже крошечных экранах КПК.С плохим структуры кодирования, однако, жидкость макета могут быть катастрофическими.В связи с этим, мы должны найти способы, чтобы обойти большинство, если не все, из минусов жидкости design.

Если вы как дизайнер собираемся пройти через все дополнительные работы по созданию функциональной планировкой жидкость, почему бы не пойти немного дальше и сделать его совместимым со всеми резолюциями, а не просто больше всего?Вы можете использовать несколько методов для создания невероятно универсальный, адаптивная схема, которая будет оставаться идеально функциональное с постоянно меняющимися экрана sizes.

В этой статье we’ обсудим эффективные методы, чтобы создать 100%-функциональных адаптивных CSS-layouts, и представить подробную информацию о других учебников и practices.

Также учитывать наши предыдущие статьи:

• Фиксированные Жидкость против против Упругие Layout: Что это правильный выбор для Вас
  В данной статье рассматриваются преимущества и недостатки каждого типа макета?.Либо можно использовать, чтобы сделать успешную макета сайта, пока вы держите удобство в mind.
• гибкие макеты: вызов для Future
  обсуждаются проблемы гибких макетов для future.
• Разрешение экрана и лучше Пользователь Experience
  представляет вопрос о разрешении экрана, то считает, что средняя user’ S profile.

1.Жидкость макет, используя Grid

Большинство из нас слышали о 960 Grid System для разработки фиксированной ширины веб-страниц.Использование 960 часто делает фиксированной ширины конструкции предпочтительнее жидкости макетов.Тем не менее, есть способ, чтобы создать на основе сетки эластичные layout.Упругие макеты, технически отличается от жидкости макеты в их структуры кодирования, но они дают практически идентичные результаты для user.

Что такое жидкости сетки

Жидкости сетки могут быть созданы посредством умного использования DIV слоями, проценты и очень простая математика.Идея исходит от Этан Marcotte, который понял, что “ em” устройство может пойти дальше, чем размер шрифта.We’ пойдем по основам здесь, но для полного и подробного обзора метод, читайте в статье Жидкость Grids Этан Маркотт,которая является полной проходных и учебник по созданию сети на основе упругого layout.

Идея здесь заключается в использовании относительных единицах, сочетание проценты и em’ ы, и использовать простое деление, чтобы найти эквиваленты пикселей шириной, которые обычно используются для фиксированной ширины design.

Benefits

• Этот метод позволяет вам иметь сетке, которая когда-то казалась возможной только с фиксированной шириной layouts.
• Пользователь может просматривать всю компоновку, используя свои заданный размер текста, и все будет оставаться в proportion.
• Стиль макета использует понятия, которые являются кросс-браузерный compatible.
• Сразу понял, понятие это довольно легко исправить большинство проблем с жидкостью design.

Как создать Fluid сетки Layout

Первый шаг в создании этой жидкости макет для создания макета предпочтительной фиксированной шириной.Таким образом, дизайнер все еще можете видеть пропорции и может применяться Божественная пропорция, баланс и соответствующие расстояния techniques.

От простого макета выше, мы можем видеть, как мы бы этого кода в CSS.960 пикселов будет наш фиксированной ширины, и мы хотели бы заставить горизонтальной прокрутки для любого разрешения уже, чем это.Все наше содержание в оболочку, которая составляет 880 пикселей в ширину.У нас есть 40-пиксель поля на левой и правой стороне, а 20 пикселей расстояния между всеми нашими elements.

Everything’ нормально, пока мы не начали думать о юзабилити.Этот тип макета, вероятно, хорошо работать для многих пользователей, но не для всех.Таким образом, let’ S передавать эту жидкость макета.Если мы хотим, чтобы эта схема сохранить свои пропорции в любом разрешении экрана, we’ придется изменить наш 960-пикселей шириной до 100%, а затем найти эквиваленты процент из 880 пикселей, 640 пикселей и 220 pixels.

Это просто требует некоторого рационального мышления.В нашем фиксированной ширины макета, вся наша оболочка была 880 пикселей, в 960-пикселей широкий дизайна.Если мы хотим эквивалент в процентах, все, что нам нужно сделать, это разрыв:

880 пикселей ÷ 960 пикселей = 0.91666667

Виртуальный что десятичное число, превратить его в процентах, и вы получите 91,666667%.Теперь, поскольку браузеры обрабатывают проценты по-разному, это не было бы мудрым, чтобы собрать все эти десятичные места прямо в layout. Браузеры либо круглый вверх или вниз, чтобы точно знать, что we’ Re работаем, мы должны вокруг негодо целого числа самих себя.С it’ S ближе к 92%, we’ буду сгонять.Если нужно округлить вниз позже из-за дополнительных выпусков интервал, that’ S легко done.

 name="code">
wrapper {
	width: 92%;
}

За содержание и боковой областях, мы должны сделать то же самое, но в правильной пропорции.Потому что эти две области находятся в пределах 880-пикселей широкий оболочку DIV, мы должны найти эти проценты относительно этогоDIV:

640 пикселей ÷ 880 пикселей = 0,727272 → 73%

220 пикселей ÷ 880 пикселей = 0,25 → 25%

 name="code">
content {
	width: 73%;
}

sidebar {
	width: 25%
}

Let’ на самом деле вокруг области содержимого до 72%, так что наш макет doesn’ T перерыва.Потому что он должен быть расположен рядом с баром навигации, мы don’ т хотим, чтобы это было слишком wide.

Это очень простая концепция и гораздо более эффективный способ справиться пропорций в жидкости дизайна.С помощью этого метода, дизайнер doesn’ т есть оправдание, что пропорции не могут быть сохранены и разрушить эстетической привлекательности своих layouts.

Примечание о Margins

Дизайнеры определяют длину полей по-разному.Один из способов заключается в вычислении процентов от поля (в данном случае 20 пикселей ÷ 880 пикселей).Другая заключается в установлении фиксированной маржи или, как в нашем примере, жесткий-код их как 20 pixels.

Каждый метод имеет свои плюсы и минусы.С процентах полей, дизайнер рискует поля слишком широкий в очень больших разрешениях экрана, но, вероятно, достигает лучших пропорции.Фиксированная маржа может вызвать небольшие недостатки в пропорциях, но гарантирует, что расстояние будет выглядеть правом независимо от того, какой экран size.

2.Адаптивная Content

Еще одна распространенная проблема с жидкостью конструкции является то, что, даже если они приспосабливаться к различным разрешением экрана, если разрешение получает слишком мало (например, на телефон или КПК), либо невероятно большой, вещи начинают выглядеть немного смешно.Например, три колонки будет выглядеть очень суматоху на экране КПК с разрешением только 240-пикселей wide.

Чтобы решить эту проблему, мы можем использовать метод, который предполагает адаптацию содержания на определенный диапазон разрешений экрана.К счастью, мы все еще можем использовать технику, изложенных выше, чтобы сохранить наши пропорции, и тогда мы сможем добавить эту технику для еще более usability.

Резиновая разметка с адаптивной Content

Самые жидкости макеты выглядят на экране резолюций 800× 600 пикселов до 1280-пикселей в ширину и больше.Тем не менее, было бы еще лучше, если бы мы могли разбить его немного больше и создать несколько различных заказных макетов для резолюций, от 800 до 1024 пикселей, 1024 на 1280 пикселей и 1280 пикселей и выше.Кроме того, пользовательских настроек может быть сделано для разрешения экрана, которые являются 640 до 800 пикселей, 320 на 640 пикселей, 240 на 320 пикселей и 240 пикселей и below.

Пример этого метода используется на Человек в Blue:

В приведенном выше примере есть только два отдельных стилей: один для резолюциях шире 800 пикселей и одной резолюции уже, чем 800 пикселей.Более эффективного осуществления этой техники будет иметь несколько стилей макета для более точного учета различных разрешениях экрана. Marc Van Den Dobblesteen’ с макета, например, Switchy McLayout, обеспечивает идеальный пример использования этих альтернативных стилей sheets.

Benefits

• Дизайнер способен видеть с большей точностью, какой дизайн будет выглядеть в разных resolutions.
• Лучшее соблюдение принципов построения интервалов и баланса, независимо от того, на какой платформе дизайн рассматривается on.
• Мельчайшие и крупнейшие резолюциями обрабатываются с perfection.

Создать жидкости Макет с адаптивной Content

Для создания этого типа планировки, нам нужны две вещи: отдельные таблицы стилей для каждого диапазона разрешений экрана, и способ определения user’ с разрешением экрана.Популярная пошаговое это статья динамическое разрешение, зависящие от макета Technique Кевин Hale.

Первый шаг заключается в создании множества альтернативных файлов макета.Например, один может быть назван narrow.css и будет с учетом очень узких резолюций.Другой может быть normal.css и будет применяться к обычным разрешением экрана компьютера, а третий может быть wide.css и будет обрабатывать необычно большой resolutions.

Мы можем использовать JavaScript, чтобы сделать несколько простых изменений в зависимости от заданных стилей. Dynamic зависит от разрешения Layouts предлагает несколько примеров JavaScript в демо объясняет, как он используется.Деклараций всех стилей и файлов JavaScript, затем поместить в заголовок, как и любой другой вид layout.

<!-- Narrow style sheet -->
<link rel="alternate stylesheet" type="text/css" href="css/narrow.css"
title="narrow"/>

<!-- Default style sheet -->
<link rel="stylesheet" type="text/css" href="css/normal.css" title="default"/>

<!-- Wide style sheet -->
<link rel="alternate stylesheet" type="text/css" href="css/wide.css" 
title="wide"/>

<!-- Included JavaScript to switch style sheets -->
<script src="scripts/dynamiclayout.js" type="text/javascript"></script>

Обратите внимание на названию attribute во всех трех ссылки на таблицы стилей: “ узкий, ” “ default” и “ wide.” Принимая пристальный взгляд на DynamicLayout() функции в исходном JavaScript,мы видим, что это достаточно легко настраивать, какие таблицы стилей называется по каждому названию атрибута.Мы также можем видеть, как изменить пикселей шириной accordingly.

function dynamicLayout(){
    var browserWidth = getBrowserWidth();

    // Narrow CSS rules
    if (browserWidth < 640){
        changeLayout("narrow");
    }
    // Normal (default) CSS rules
    if ((browserWidth >= 640) && (browserWidth <= 960)){
        changeLayout("default");
    }
    // Wide CSS rules
    if (browserWidth > 960){
        changeLayout("wide");
    }
}

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

Похожие Techniques

Для подобную технику, посмотрите Динамические макеты с адаптивным columns Больше Марка Порка New.К услугам гостей целом же код,хотя немного отличается.Есть, к счастью, много вариантов и примеры скриптов для получения того же адаптивного содержания work.

Для загрузки сценария для этой версии адаптивного содержимое, перейдите к Динамические макеты с адаптивным columns.

Концепция isn’ т трудно, и многие разработчики сделали свою собственную версию этой техники.Великий источник, чтобы найти еще больше примеров адаптивных макетов содержание и скриптами Clagnut.com’ Блог сообщению, “ переменная фиксированной ширины layout “.Существует даже одна такая техника, размещенные на эту должность, которая не требует наличия бы то ни было. CSS DROP COLUMN Layout

3.Изображения в жидкости Layout

Одной из основных проблем среди разработчиков жидкости макеты имеет дело с изображения и другой контент, который требует множества ширину.В большинстве случаев, we’ D все как наше изображение, чтобы быть как можно больше, или, по крайней мере, чтобы предотвратить любое неловкое белого пространства, если they’ Re слишком мал.В фиксированной ширины макета, поправки могут быть сделаны вручную, но довольно легко, для преодоления этих проблем.Тем не менее, в жидкости макет, в котором ширина области, где появляется изображение постоянно меняется, эти проблемы могут придумать все более again.

Автоматическая Журнал Layout

Одн …

Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров