Верстка для різних екранів

верстка
На сьогодні представлено досить велику кількість екранів, які мають різні дозволи, а отже, і сайти на них відображаються по-своєму. Це обов'язково потрібно враховувати при написанні коду і дотримуватись правилверстки для різних екранів.

У попередній статті, ми вже розглянули, як можна виконати верстку для різних браузерів, тут же йтиметься про різні екрани та їх дозволи.

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

Щоб застосувати верстку до різних екранів, допоможе правило стилів@media. Наприклад,

Цей запис говорить про те, що для класуall буде застосовано відступи в10px у тому випадку, коли роздільна здатність екрана будедо 1024px.

Якщо потрібно вказати правило для проміжних екранів, запис буде наступний:

У цьому випадку властивості стилів будуть застосовані для екранів, які використовують роздільну здатність від 1024 до 1640px.

Якщо для певного дозволу буде велика кількість різних стилів, то раціональніше буде винести їх в окремий файл. Для цього, при вказівці шляху з основної сторінки сайту, потрібно виконати такий запис у межах:

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

@media screen (max-width:1380px)

Вона означає, що стилі будуть застосовані тільки до настільних комп'ютерів, з шириною екрана до 1380px.

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

Якщо Ви хочете повідомляти своїх відвідувачів про останні новинки, повідомляти останні новини, то можете замовити розсилку електронною поштою, яка реалізується за допомогою спеціального сервісу. Він допоможе вам без турбот вести зручну та якісну розсилку.