Отправляет email-рассылки с помощью сервиса Sendsay
  Все выпуски  

Клуб профессиональных программистов :: Выпуск #140


Клуб профессиональных программистов «Весельчак У»
Информационная рассылка сайта и форума.  Выпуск 140.  25 августа 2012 г.

Здравствуйте, уважаемые читатели!



Сегодня предлагаем вам прочесть фрагмент статьи «CSS media» об адаптации таблицы стилей для просмотра сайта широким спектром клиентских устройств, включая мобитьные клиенты с малым размером экрана.



Приятного чтения! Прощаемся с вами до следующего выпуска.


С уважением, команда Клуба.


Казалось бы, что об этом писать? Да, информации много. Но саму технологию почему-то мало используют. Итак, расскажу почти с самого начала.


Правило media позволяет указать тип носителя, для которого будет применяться указанный стиль. На htmlbook.ru есть пример:


Код: (html)
<html>
<head>
<style>
media screen
  {
  p.test {font-family:verdana,sans-serif;font-size:14px;}
  }
media print
  {
  p.test {font-family:times,serif;font-size:10px;}
  }
media screen,print
  {
  p.test {font-weight:bold;}
  }
</style>
</head>

И что это означает? Что для устройства, указанного после правила @media, будет применен соответствующий стиль. Но этот, как видите, CSS-код предназначен для внедрения в HTML-код. А как быть, если стили вынесены в отдельный файл? Ничего проще:


Код: (html)
<link rel="stylesheet" type="text/css" media="screen" href="screen.css">
<link rel="stylesheet" type="text/css" media="print" href="print.css">

Типы устройств можно посмотреть в htmlbook или на www.w3schools.com.

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


А теперь—почему появилась эта статья. Я обнаружил в статистике своего «блога», что ко мне стали часто заходить посетители с низким разрешением экрана (от 300 px) со 100% отказом. А все почему? Фиксированная верстка страниц с левым сайдбаром доставляет массу неудобств для такого разрешения. Что же делать? Читать, читать, изучать!


...



Полностью прочитать статью можно на нашем сайте, в разделе «Web».



В избранное