br 8eb34


search

Верстка для разных экранов

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

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

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

Чтобы применить верстку для разных экранов, поможет правило стилей @media. Например,

@media (max-width:1024px;) {
.all {padding: 10px;}
}

Данная запись говорит о том, что для класса all будет применены отступы в 10px в том случае, когда разрешение экрана будет до 1024px.

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

@media (min-width:1024px;) and (max-width:1640px) {
        .all {padding: 10px;}
        table {width:80%}
}

В этом случае свойства стилей будут применены для экранов, которые используют разрешения от 1024 до 1640px.

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

<link rel='stylesheet' type="text/css" href='css/style.css' />
<link rel='stylesheet' type="text/css" media='(min-width: 1024px)' href='css/style1024.css' />
<link rel='stylesheet' type="text/css" media='(max-width: 1024px) and (min-width: 800px)' href='css/style800.css' />

Когда нужно указать правила только для мобильных устройств (планшеты, смартфоны), то в данном случае применяется запись max-device-width или min-device-width для обозначения максимального и минимального разрешений соответственно.

Также можно обозначать использование правил только для экранов мониторов, при этом применяется атрибут - screen. Запись будет иметь вид:

@media screen (max-width:1380px) { ... }

Она обозначает, что стили будут применены только к настольным компьютерам, с шириной экрана до 1380px.

Таким же образом, вместо screen, можно указывать handheld (мобильные устройства), print (принтеры), projection (проекторы), tv (телевизоры).

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

Добавить комментарий

Защитный код
Обновить

Комментарии