Как подключить css на телефоне

Как подключить css на телефоне

Данное руководство устарело. Актуальное руководство: Руководство по ASP.NET Core

Учитывая особенности мобильных устройств — размеры, поддержку тех или иных стилей CSS и т.д. — может потребоваться определить какой-то особенный стиль для мобильных устройств.

В CSS2 уже было решение в виде правила media , которое позволяет указать устройство, для которого используется данный стиль:

Правило media=»handheld» указывает, что стили в mobile.css будут применяться к мобильным устройствам, в то время как правило media=»screen» применяется к десктопным сайтам.

Однако многие современные мобильные браузеры по умолчанию считают, что страница предназначена для десктопов, поэтому в любом случае применяет правило media=»screen» . Поэтому на подобное решение не стоит полагаться.

Для решения этой проблемы в CSS3 были введен механизм CSS3 Media Query. Например, чтобы применить стиль только к мобильным устройствам мы можем написать так:

Значение атрибута media screen and (max-device-width:480px) говорит нам о том, что стили из файла mobile.css будут применяться к тем устройствам, максимальная ширина экрана которых составляет 480 пикселей — то есть фактически это и есть мобильные устройства.

Как вариант, можно использовать правила CSS3 Media Query в самом файле css:

К примеру настройка стилей под смартфоны, планшеты и десктопы может выглядеть так:

Применяемые функции в CSS3 Media Query:

aspect-ratio : отношение ширины к высоте области отображения (браузера)

device-aspect-ratio : отношение ширины к высоте экрана устройства

max-width/min-width и max-height/min-height : максимальная и минимальная ширина и высота области отображения (браузера)

max-device-width/min-device-width и max-device-height/min-device-height : максимальная и минимальная ширина и высота экрана мобильного устройства

orientation : ориентация (портретная или альбомная)

Например, мы можем задать разные стили для разных ориентаций мобильных устройств:

Используем медиазапросы CSS3 для адаптивной вёрстки шаблона

Здравствуйте, уважаемые друзья и гости моего блога. В сегодняшней статье поговорим о медиазапросах CSS3 и о том, как с их помощью создаются адаптивные шаблоны сайтов.

Но, даже если вы не собираетесь адаптировать шаблон сайта, эти знания помогут вам с такими элементами, как рекламные блоки, формы подписки с фоновым изображение, и всем, что вылезает и съезжает за пределы каркаса, когда меняется размер экрана.

В общем, медиазапросы – это хорошая альтернатива создания отдельного мобильного шаблона для сайта. О том, как важно позаботится об удобстве мобильных посетителей я писал ещё год назад, все доводы в пользу адаптивного дизайна можно прочитать здесь.

Зачем нужны медиазапросы и как они работают

Вы, конечно же, знаете, что каждый сайт состоит из HTML каркаса и CSS стилей. Всё остальное, базы данных, скрипты и прочие примочки, нужны в зависимости от сложности проекта.

HTML – каркас, это разметка сайта. То есть блоки с шапкой, подвалом, сайтбарами и контентом. Если вы представляете себе таблицу в текстовом редакторе Word, то каркас сайта – это нечто похожее на таблицу. Только вот код самого простого каркаса выглядит вот так:

Но в таком виде, на экране мониторов будет отображаться белый экран. Так как нет содержимого блоков и самого главного – CSS стилей оформления.

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

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

Происходит это из-за тог, что изначально стили были прописаны для стандартных мониторов, кто же мог подумать, что современные гаджеты так стремительно захватят мир. А тут ещё и поисковики приняли адаптивный дизайн за фактор ранжирования. Ну, прямо, засада какая-то.

И вот тут-то приходят на помощь медиазапросы. Которые, кстати, и стали доступны с появление новой версии CSS3.

Так как же они работают? А работают они следующим образом, если вам приходилось хоть раз писать формулы в Excel или программировать, то вы знакомы с условием «если». То есть медиазапрос создаёт такие условия: «если экран браузера или устройства меньше 600px, то применяй следующие стили».

А выглядит это таким вот образом:

Это условие будет менять дизайн сайта и при изменении размера окна браузера и при просмотре сайта с мобильного устройства.

Если же применять запросы только для маленьких гаджетов, то запрос будет выглядеть так:

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

А теперь давайте разберемся, где же прописывать подключение медиазапросов.

Как подключить медиазапросы

На самом деле здесь всё очень просто. Вы можете добавить запросы в таблицу стилей вашего сайта (style.css) или создать новый файл со стилями для мобильных устройств и подключить его как отдельный файл стилей.

Для начала разберём первый вариант, — добавление медиазапросов в таблицу стилей. Запрос должен располагаться после всех основных стилей, то есть в самом низу файла style.css.

Таким образом, первоначально будут выполнены основные стили, а в случае выполнения условий, применены стили, указанные в запросе.

Этот способ хорошо использовать, если нужно внести небольшие коррективы в шаблон. Скажем, подправить вид отображения блоков контекстной рекламы при просмотре с маленьких экранов.

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

Давайте рассмотрим процесс добавления медиазапросов этим способом.

Для начала вы создаёте отдельный файл с запросами и стилями. Сделать это можно в редакторе Notepad++. Сохраняете его как css файл.

Далее, нужно копировать этого файла на хостинг в папку вашей темы, или в папку, где хранится файл style.css.

И в завершение процедуры нужно подключить таблицу стилей для мобильных устройств. Для этого открываете файл заголовка (header.php), ищите, где подключается основные стили, и ниже добавляете подключение мобильных стилей.

Этот код говорить о том, что эти стили будут срабатывать, если экран устройства меньше 600px.

Вот, в принципе и все хитрости с медиазапросами. Как гласит правило Парето – 20% усилий гарантирует 80% успеха. То есть знания, полученные в статье, на 80% гарантируют успешное применение на практике. Остальное дело за знаниями HTML и CSS.

Ах да, я же ещё хотел рассказать вам об инструментах, которые помогут вам в разработке адаптивной верстки сайта.

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

Как на компьютере посмотреть вид сайта с мобильных устройств

Сегодня в современных браузерах Firefox, Chrome, Яндекс есть панель разработчика, в которой легко можно просмотреть, как выглядит сайт на мобильных устройствах.

Для этого достаточно нажать правую кнопку мышки на странице сайта и выбрать пункт «Просмотр кода элемента» для Хрома и Яндекса или «Исследовать элемент» для Файрфокса.

А в панели разработчика можно просмотреть адаптивную вёрстку, нажав на кнопочки, показанные на скриншотах выше.

Также для этих целей можно воспользоваться сервисом Screenfly . Работать с ним очень просто достаточно ввести в поле адрес сайта и смотрите, как он выглядит на разных мобильных устройствах.

Вот теперь вы готовы создавать свои адаптивные шаблоны. В качестве наглядного примера работы медиазапросов посмотрите мой видеоурок.

А у меня на сегодня всё, увидимся в новых статьях и видеоуроках. Желаю вам успехов!

Создаём мобильную версию сайта, используя CSS3 медиа-запросы

CSS3 продолжает радовать и, одновременно, разочаровывать веб-дизайнеров и веб-разработчиков. Мы радуемся возможностям, которые открывает перед нами CSS3, и тому, сколько проблем можно будет решить, используя их. Разочарование заключается в том, что все эти возможности недоступны браузерам Internet Explorer 8 и ниже. В этой статье будет продемонстрирована техника, использующая функционал CSS3, который также не поддерживается в Internet Explorer 8. На самом деле это не имеет никакого значения, т.к. главной областью применения этой техники являются мобильные устройства, такие как Iphone и Android-смартфоны, у которых браузеры поддерживают большое количество свойств CSS3.
В этой статье я объясню, как, с помощью нескольких правил CSS, вы можете создать Iphone-версию вашего сайта. Мы взглянем на очень простой пример и, попутно, я буду объяснять, как написать и использовать таблицу стилей для мобильных устройств для существующего сайта.

Медиа-запросы

Если вы хоть раз создавали таблицу стилей для своего сайта, которая описывала бы, как веб-страница выглядит на бумаге после печати, то вам уже знакома идея создания конкретной, отдельной таблицы стилей, которая начинает действовать при наступлении определённых условий – в случае с таблицей стилей для печати, когда страница будет отправлена на печать. Такая функция была введена в CSS2 c помощью медиа-типов. Они позволяют указать браузеру тип устройства, на котором нужно отобразить сайт – принтер, экран монитора, планшет и т.д. К сожалению, эти типы не получили большого внимания и вы вряд ли встретите использование каких-либо типов, кроме как для печати @media print .

Медиа-запросы в CSS3 используют эту идею и расширяют её. Вместо того, чтобы определять тип устройства, они определяют его свойства и вы можете использовать медиа-запросы для проверки следующих параметров:

• высоту и ширину окна браузера
• высоту и ширину экрана устройства
• положение в пространства (вертикально или горизонтально)
• разрешение экрана

Если пользователь использует браузер, который поддерживает медиа-запросы, тогда мы можем написать CSS-стили для определённых ситуаций. Для примера мы можем определить, что пользователь использует смартфон и показать ему совершенно другой дизайн сайта.

Так выглядит сайт на экране монитора:

А так он выглядит на экране смартфона:

Как вы видите на примере выше, мобильная версия сайта не просто была уменьшена, чтобы соответствовать экрану на телефоне – её структура была полностью переработана и спроектирована заново, чтобы сайт легко воспринимался на маленьком экране устройства. Многие подумают, что это специальный макет для iPhone, но это не так. Сайт одинаково выглядит на Android-устройствах, iPhone и в телефонах с браузером Opera Mini. используя медиа-запросы мы определяем свойства устройств и отображаем специально написанные стили для них.

Использование медиа-запросов для создания таблиц стилей для телефонов

Для начала разберём очень простой пример – ниже представлен макет с двумя колонками.

Чтобы сделать его более удобным для чтения на iPhone, я решил сделать весь дизайн в одну колонку, также уменьшим область с картинкой и заголовком, чтобы читателям сайта не приходилось прокручивать её до основного текста.

Первый способ использовать медиа-запросы – это просто написать альтернативную секцию с правилами CSS в вашей таблице стилей. Итак, для определения маленьких экранов, мы используем следующий синтаксис:

Затем нам нужно написать необходимые стили CSS для устройств с маленьким экраном внутри фигурных скобок. Из за того, что наша таблица стилей каскадная, мы можем переписать ранее заданные стили для необходимых элементов. Это работает до тех пор, пока раздел с медиа-запросом для маленьких экранов идёт ниже обычных стилей. Итак, добавим следующие правила:

Мы используем альтернативное изображение меньшего размера и уменьшаем высоту заголовка, затем отменяем свойство float для контента и навигации, установив его в значение none . Это нужно чтобы блоки с контентом и навигации располагались в нормальном потоке – друг под другом. Следующий шаг – установка ширины для контента, равной родительского элемента, а ширины блока навигации установим в значение auto . Все эти правила вступят в силу только на маленьком экране.

Подключение отдельной таблицы стилей, используя медиа-запросы

Добавление медиа-запросов со стилями для мобильных устройств в основную таблицу стилей целесообразно, только есть вы хотите внести немного изменений. Если же таблица стилей содержит тонну строк правил для разных устройств или вы хотите полностью отделить стили для настольных компьютеров и мобилок, то вам целесообразней подключать свою таблицу стилей для каждого устройства.

Чтобы подключить отдельную таблицу стилей и, используя каскадность, переписать существующие стили, необходимо после подключения основного css-файла написать следующие строки:

Модернизация существующего сайта

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

Макет для экрана монитора

На данный момент сайт имеет несколько колонок. Домашняя страница несколько отличается от остальных, но в целом они все построены на трёх колонках. Этому сайту уже несколько лет и, когда он создавался, никто не рассматривал медиа-запросы. Да и сами медиа-запросы были ещё на стадии разработки.

Подключаем новую таблицу стилей

Необходимо сделать несколько изменений, чтобы макет смотрелся круто на телефонах, поэтому мы подключаем отдельную таблицу стилей после основной, используя медиа-запросы, которая вступит в силу на экранах, ширина которых меньше 480px.

Для создания новой таблицы стилей, мы делаем копию основной и называем её small-device.css. Мы перезапишем некоторые правила, а всё лишнее удалим.

Сокращаем размер шапки

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

Изменяем макет

Следующим шагом мы изменяем макет, чтобы он был одну колонку. Колонки в текущем макете для настольных компьютеров являются плавающими, их позиции заданы свойством float . Всё, что нам нужно сделать, это отменить свойство float и вернуть нормальный поток блоков, друг под другом. Так же мы установим ширину блоков в 100% от родителя.

Прибираемся

Настало время проверить наш макет в онлайн-эмуляторе и подкорректировать мелкие недочёты, чтобы всё смотрелось супер. Для облегчения этого процесса рекомендую использовать расширение firebug для Mozilla.

Тестируем на Iphone

Загрузив таблицу стилей на хостинг, мы обнаружим, что сайт отображается уменьшенным и приходиться его приближать. Решение было найдено на сайте разработчиков Safari – добавляем один дополнительный мета-тэг в блок <head> , который устанавливает область просмотра, равную ширине экрана:

Вот теперь сайт отображается как надо!

Это был очень простой пример, который показал, как легко адаптировать сайт под мобильные устройства.
Источник

Как использовать медиа запросы CSS3 чтобы создать версию вашего сайта для мобильных устройств

CSS3 продолжает одновременно восхищать и разочаровывать веб дизайнеров и разработчиков. Восхищают возможности, которые предоставляет CSS3, но разочаровывает практически полное отсутствие поддержки в Internet Explorer 8. В данной статье демонстрируется техника использования CSS3, которая не поддерживается в Internet Explorer 8. Однако, для тех, кому приходится обеспечивать поддержку мобильных устройств (например, iPhone или тех, которые используют Android) такой недостаток будет безразличен.

В данной статье объясняется, как с помощью нескольких правил CSS3 можно создать рабочую версию сайта для iPhone. Будет представлен очень простой пример, а также демонстрация того, как добавить стиль маленького экрана мобильного устройства к уже существующему сайту.

Медиа запросы

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

Медиа запросы в CSS3 подхватывают данную идею и развивают ее. Но в дополнение к определению типа устройства они позволяют получить сведения о его возможностях. Например:

• ширина и высота окна просмотра
• ориентация – например, мобильное устройство выводит информацию в альбомном или портретном режиме?
• разрешение

Если у пользователя браузер, который поддерживает медиа запросы, то мы можем написать CSS специально для определенной ситуации. Например, определить, что пользователь использует маленькое устройство (например, смартфон) и выдать ему специфический шаблон страницы.Примером применения такой техники может служить сайт конференции dConstruct.

Веб сайт dConstruct 2010 в браузере Safari на экране компьютера.

Веб сайт dConstruct 2010 на экране iPhone

На выше приведенном примере видно, что сайт не просто уменьшается в размерах, а изменяется архитектура его контента, чтобы облегчить восприятие информации на маленьком экране мобильного устройства. Некоторые могут подумать, что просто используется шаблон iPhone, но это не так.. Такой же вид будет и в Opera Mini в телефоне с ОС Android. С помощью медиа запросов и определения возможностей устройства веб сайт dConstruct может обслуживать любой вид устройств, даже таких, о которых разработчики понятия не имели!

Использование медиа запросов для создания таблицы стилей для телефонов

Чтобы начать давайте рассмотрим очень простой пример. Шаблон, представленный ниже — очень простой и имеет всего две колонки.

Простой шаблон с двумя колонками.

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

Первый способ использования медиа запросов — создание альтернативной секции CSS прямо в той же таблице стилей. Так, чтобы определить целью маленькие устройства, можно использовать следующий синтаксис:

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

В приведенном коде используется альтернативное фоновое изображение и уменьшается высота и ширина заголовка, затем устанавливаются опции для контента и навигации float: none; и изменяется установка ширины, которая определялась ранее в таблице стилей. Данные правила действуют только для устройств с маленьким размером экрана.

Вид примера на экране iPhone.

Присоединение отдельной таблицы стилей с использованием медиа запросов

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

Присоединение таблицы стилей для мобильных устройств:

Testing media queries

Если вы являетесь владельцем iPhone, телефона с ОС Android или другого устройства, которое имеет браузер, поддерживающий медиа запросы, то можно проверить работу измененного CSS на них. Хотя потребуется загрузить код сайта, чтобы посмотреть на него. А как быть в том случае, если такого устройства нет или нужно провести проверку локально?

В процессе разработки вам может помочь отличный сайт ProtoFluid. Он предоставляет форму для ввода URL и просмотра дизайна, как он будет отображаться на экране iPhone, iPad или другого подобного устройства. Изображение ниже показывает вид сайта dConstruct, который представлен сервисом ProtoFluid для iPhone.

Сайт dConstruct, представленный сервисом ProtoFluid для вида на iPhone.

Можно также ввести размер окна, если нужно проверить отображение сайта на определенном устройстве с известным размером экрана.

Для использования ProtoFluid вам нужно немного изменить медиа запрос, который мы использовали ранее, чтобы добавить опцию max-width. Это будет означать, что медиа запрос будет действовать в том случае, если пользователь использует обычный браузер, но в очень маленьком окне.

После обновления кода, просто перегрузите страницу и уменьшите размер окна, когда он достигнет 480 px, шаблон страницы измениться. Медиа запрос теперь реагирует, когда размер окна просмотра соответствует введенным вам значениям.

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

Если вам не нужно, чтобы шаблон сайта изменялся, когда кто-нибудь уменьшает размер окна браузера, вам нужно просто удалить часть max-width запроса перед тем, как открыть доступ к сайту. Таким образом только те, кто смотрит сайт с маленького устройства, будут видеть измененный шаблон страниц.

Настройка существующего сайта

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

Шаблон страниц

Рассматриваемый сайт использует шаблон фиксированной ширины с тремя колонками. Дизайн был разработан пару лет назад и медиа запросы тогда не принимались во внимание во время разработки.

Добавление нового файла стилей

Чтобы сделать линеаризацию сайта нужно провести много изменений, таким образом, нужно добавить новый файл с таблицей стилей после основного и с условием использования только при значении max-width меньше 480 px.

Для создания нового файла с таблицей стилей берем основной файл сайта и сохраняем его как small-device.css. Таким образом, он начинает жить как копия основного фала с таблицей стилей. Далее в нем надо переписать несколько правил и удалить все ненужное.

Сжатие заголовка

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

Линеаризуем шаблон

Далее нужно линеаризовать шаблон и сделать одну колонку. Шаблон создан с использованием плавающих блоков, поэтому надо найти все правила, которые делают колонки плавающими и установить для них свойства float: none и width:auto. Таким образом все колонки выстроятся одна под другой.

«Причесываем»

Теперь посмотрим на шаблон в ProtoFluid и точно настроим размеры полей и отступов для различных областей, которые будут отличаться от того, что установлено для обычного шаблона. С использованием Firebug для ProtoFluid такая работа выполняется быстро и легко, а получившийся набор правил CSS затем копируется в таблицу стилей.

Проверяем сайт в ProtoFluid.

Проверка сайта на iPhone

При проверке на iPhone выяснилось, что сайт не масштабируется в одну чудесную колонку. На сайте разработчиков Safari есть решение для такой проблемы — нужно добавить тег meta к заголовку сайта. в котором устанавливается ширина окна просмотра равной ширине дисплея устройства.

После добавления тега meta сайт стал выводиться как было задумано — в одну колонку:

Вид сайта на экране iPhone.

Простая модификация сайта позволяет сделать легко ваш ресурс доступным для пользователей мобильных устройств.

Заключение

Использованием медиа запросов может ввести CSS3 в вашу повседневную деятельность. Стоить помнить о том, что браузеры, которые поддерживают медиа запросы, также поддерживают все остальные свойства CSS3. Таким образом можно использовать все возможности CSS3, когда пользователь использует iPhone или другое мобильное устройство.