Tim Holman ~ Portfolio and Playground. CSS-Tricks. CSS-Tricks по-русски. CSS transitions & media queries. Posted on 31 May 2011 • 14 comments While coding up the site for our Insites Tour, I happened across an accidental feature: a smooth transition on growing / shrinking type and image sizes when I resized the browser window. This isn’t particularly groundbreaking and has probably been put into use by others, but as I personally haven’t seen it used elsewhere on the web, I thought it’d be good to make a note of this happy accident.
The basic premise is this: you use media queries to design responsive websites that adapt their layout according to browser width, and you constantly resize your browser to see how the site performs, but each time a query kicks in, there’s a harsh jump between the old styles and the new ones. Why not use some simple CSS transitions to smooth that jump by animating the resize? A note about relative sizing In our example code above, the media queries kick in at 800px (reducing the type down to 0.8em) and at 400px (reducing the type even further to 0.7em). Техники адаптивной верстки. 17 мая 2012 в 04:10 Сайтов с адаптивной разметкой с каждым месяцем становится все больше, заказчики кроме кроссбраузерности все чаще требуют адаптивность, но многие разработчики не спешат обучаться новым техникам. Но адаптивный дизайн — это просто!
В этой статье представлено 5 примеров адаптивной разметки различных элементов веб-страниц. 1. Видео (демо) Очень простой CSS и HTML, и ваше embed-видео будет масштабироваться в соответствии с шириной страницы: 2. Max-width помогает определить максимально возможную ширину объекта. Так же можно масштабировать изображение: Такая конструкция будет работать в IE 7 и IE 9, а для IE 8 делаем такой хак: Min-width — противоположность max-width, позволяет задать минимальную ширину объекта. 3.
Если в адаптивной верстке использовать относительные значения в нужных местах, можно значительно сократить CSS код страницы. Относительный margin Пример верстки вложенных комментариев, где вместо абсолютных значений используются относительные. Относительный padding 4. Pragmatic responsive design. CSS3 Media Queries. CSS2 allows you to specify stylesheet for specific media type such as screen or print. Now CSS3 makes it even more efficient by adding media queries.
You can add expressions to media type to check for certain conditions and apply different stylesheets. For example, you can have one stylesheet for large displays and a different stylesheet specifically for mobile devices. It is quite powerful because it allows you to tailor to different resolutions and devices without changing the content. Continue on this post to read the tutorial and see some websites that make good use of media queries. CSS3 Media Queries (demo) Check my demo and resize your browser window to see it in action. Max Width The following CSS will apply if the viewing area is smaller than 600px. If you want to link to a separate stylesheet, put the following line of code in between the <head> tag. Min Width The following CSS will apply if the viewing area is greater than 900px. Multiple Media Queries Device Width For iPhone 4 Colly. Media Queries. Abstract HTML4 and CSS2 currently support media-dependent style sheets tailored for different media types.
For example, a document may use sans-serif fonts when displayed on a screen and serif fonts when printed. ‘screen’ and ‘print’ are two media types that have been defined. Media queries extend the functionality of media types by allowing more precise labeling of style sheets. A media query consists of a media type and zero or more expressions that check for the conditions of particular media features. Among the media features that can be used in media queries are ‘width’, ‘height’, and ‘color’. By using media queries, presentations can be tailored to a specific range of output devices without changing the content itself.
Status of This Document This section describes the status of this document at the time of its publication. A W3C Recommendation is a mature document that has been widely reviewed and has been shown to be implementable. Table of Contents 1. I.e. these are identical: 3. CSS3 Media Queries. Разрешение экрана в наши дни колеблется от 320px (iPhone) до 2560px (большие мониторы) или даже выше. Пользователи больше не просматривают сайты только на настольных компьютерах. Теперь пользователи используют мобильные телефоны, небольшие ноутбуки, планшетные устройства, такие как iPad или Playbook для доступа в интернет. Поэтому, традиционный дизайн с фиксированной шириной больше не работает. Дизайн должен быть адаптивным. Структура должна автоматически изменяться с учетом всех разрешений дисплеев. Для начала посмотрим это в действии.
Пред началом посмотрите на финальное демо, что бы увидеть, как хорошо это выглядит. Другие примеры Если вы хотите увидеть больше примеров, посмотрите следующие темы для WordPress, которые я сделал используя media queries: iTheme2, Funki, Minblr и Wumblr. Обзор Контейнер страницы имеет ширину 980px для любого разрешения, больше 1024px. Не будем останавливаться на подробном описании HTML. HTML5.js Обратите внимание, что в демо используется HTML5.
Шаг 1. «Резина» (fluid grids) В этом году я делал редизайн веб-сайта с большим количеством контента. Требования к дизайну были простые: клиент попросил сохранить существующий логотип компании, улучшить плотность печати и увеличить читабельность. Так что, в самом начале разработки дизайна, я потратил значительное количество времени на планирование хорошо структурированной сетки для библиотеки информационных блоков. Последние несколько лет такой образ мышления стал более распространенным. Благодаря Марку Балтону (Mark Boulton), Кхои Винху (Khoi Vinh), и другим, мы видим возрождение интереса к типографской сетке, и того, как использовать ее в сети. И, откровенно, идея была сногсшибательным хитом: миллионы CSS фреймворков расцвели множеством дополняющих их инструментов, каждый из которых создан для того, чтобы сделать основанный на сетке дизайн еще более доступным для среднестатистического дизайнера/верстальщика.
И почему бы и нет? Минимальное разрешение экрана: маленькая невинная ложь. target ÷ context = result. Responsive Web Design. Вчера была опубликована хорошая статья «Веб-дизайн. Каждому устройству свое представление». Несмотря на неплохие размышления, к сожалению, вывод в ней довольно глупый. А именно: «Нужно определить, какими устройствами могут пользоваться ваши посетители, проработать и создать для этих устройств представление вашего сайта, определить устройство посредством проверки заголовков браузеров, и отправить наиболее подходящее представление.»
Почему это глупо Во-первых, никто не сможет предугадать, какими устройствами будут пользоваться ваши посетители. Нужно ориентироваться не на устройства, а на разрешения. Это скриншот из презентации «Beyond the mobile web by yiibu» (очень рекомендую). Во-вторых, если вы не facebook или yandex, скорее всего, вы не потянете создание и поддержку разных версий сайта для каждого устройства. Как сделать один сайт для всех устройств Вопросы, которые поднимал автор вышеуказанной статьи, уже довольно давно в цивилизованном мире обдуманы, и, более того, они уже решены. Ссылки.