Разница между @media и атрибутом media в CSS

@Aaye · Регистрация: 06.01.2019

Студворк — интернет-сервис помощи студентам

Доброго времени суток! Очень каноничный ламер, буквально 2 дня назад начал читать про разметку HTML.
Господа форумчане, объясните разницу между @-правилами и атрибутами с идентичными значениями, а-ля @media и media, @charset и charset(хотя вроде с этим понял), то бишь:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
<head>
  <meta charset="utf-8">
  <style media="screen" type="text/css">
    h1 {
     fontsize: 120%;
     font-family: Arial, Verdana, Helvetica, sans-serif;
     color: #FF0000;
    }
  </style>
  <body>
  <h1> Hfwnejbwjnreierijerge</h1>
  </body>

Или нужно писать а-ля:

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>@media</title>
  <style type="text/css">
   @media screen {
    body {
     font-family: Arial, Verdana, sans-serif;
     font-size: 0.9em;
     color: #000080;
    }
    h1 {
     background: #faf0e6;
     border: 2px dashed #800000;
     color: #a0522d;
     padding: 7px;
    }

@Fedor92 · 06.01.2019, 18:50

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

@Aaye · 06.01.2019, 21:03 **[ТС]**

Fedor92, Fedor92, а разве в обычном атрибуте media не те же значения в css указываются, нежели в @media? Допустим:

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<style type="text/css">
   @media screen { 
    body {
     font-family: Arial, Verdana, sans-serif;
     font-size: 0.9em;
     color: #000080;
    }
    h1 {
     background: #faf0e6;
     border: 2px dashed #800000;
     color: #a0522d;
     padding: 7px;
    }
    h2 {
     color: #556b2f;
     margin: 0;
    }
    p {
     margin-top: 0.5em;
    }
   }
   @media print { 
    body {
      font-family: Times, 'Times New Roman', serif;
    }
    h1, h2, p {
     color: #000;
    }
   }
  </style>

И :

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<style media="screen">
    .window {
     background: #333;
     border: 1px solid red;
     font-size: 90%;
     color: #fc0;
     padding: 10px;
    }
  </style>
  <style media="print">
    .window {
     border: 1px solid black;
     font-family: Arial;
     font-size: 90%;
     font-weight: bold;
     color: black;
     padding: 10px
    }
  </style>

Тогда в чём собственно разница, можешь объяснить если не сложно. Или есть какие-то гибкие фундаментальные различия в использование @-правил, перед атрибутами в CSS? Больше возможностей или может это исключительно идейная/идеологическая часть в использовании правил, над атрибутами? И в чём разница в возможностях тогда, и что прагматичней использовать?

@Fedor92 · 06.01.2019, 22:03

Aaye, не верно пишешь...

Смотри CSS будет выглядеть примерно так:

CSS
1
2
3
4
5
@media (max-width:320px){}
 
@media (max-width:480px){}
 
@media (max-width:960px){}

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

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Основы отладки веб-приложений на SDL3 по USB и Wi-Fi, запущенных в браузере мобильных устройств 8Observer8 07.02.2026 Содержание блога Браузер Chrome имеет средства для отладки мобильных веб-приложений по USB. В этой пошаговой инструкции ограничимся работой с консолью. Вывод в консоль - это часть процесса. . .	SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .
SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .

@Fedor92 2964 / 2621 / 1068 Регистрация: 15.12.2012 Сообщений: 10,091 Записей в блоге: 11
	06.01.2019, 18:50
	Ну фундаментальная разница заключается в гибкости @media в css в отличии от атрибута... @media позволяет более тонко настроить стили сайта для отображения на разных разрешениях... 1

Разница между @media и атрибутом media в CSS

Решение