CSS: Какой звук измерял queries, зачем они служат, как они группируются, и как осуществлять их?

Что @media queries использовать, чтобы достигать главных устройств принимая во внимание размеры и разрешение экрана?

Как встречается достижение в устройства из-за групп (например, все tablets) внутри среднего показателя query, чтобы применять к ним правила стиля?

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

25
задан 22.02.2017, 03:39
1 ответ

Ради completud ответа Cedano, существуют какие-то другие возможности для среднего показателя queries:

Публикаций

он используется обычно для нее versiГіn, чтобы печатать одну pГЎgina, очень желательно, если твой сайт - книга, журнал или perГіdico

@media print

Он идеальный, чтобы удалять элементы, которые не годится печатать. Для mГЎrgenes он используется целиком с правилом @page, которое не привилегия средств типа print а следовательно он может идти внутрь или снаружи.

@media print {
  header,
  footer,
  aside,
  form {
    display: none;
  }
  a:after {
    content: "("attr(href)")";
  }
  h2 {
    break-before: page;
  }
  #qr:after {
    content: url(https://chart.googleapis.com/chart?cht=qr&chs=150x150&chl=https://es.stackoverflow.com/a/232846/342&choe=UTF-8);
    position: absolute;
    right: 0;
    bottom: 0;
  }
}

@page {
  margin: 2cm;
}
<header>Encabezado no imprimible</header>
<article>Artículo que se desea imprimir con un <a href="http://www.páginadeejemplo.com">enlace de ejemplo</a>
  <h2>Título de la siguiente página</h2>
  <p>Contenido de la siguiente página</p>
  <div id="qr"></div>
</article>
<form>Formulario no imprimible</form>
<aside>barra lateral no imprimible</aside>
<footer>Pie de página no imprimible</footer>

, Чтобы проверять предыдущий demo, рекомендует себе выбирать весь текст и нажимать клавиши Ctrl + P в Windows или Cmd + P в Мак.

Визуальный результат serГЎ сходный с этим:

página 1

página 2

тип Лектората экрана

Для устройств, которые выносили бы чтение контента, в дату лучшая опора этого existГ - в в браузере Safari до тех пор, пока из-за вопросов патентов они не забрали функциональность делает уже некоторые aГ±os.

css для людей dГ©biles визуальные, или что не обладают чувством ее visiГіn, он был снова взят из-за нее especificaciГіn CSS3 с приходом HTML5, но в дату не существует ни одна implementaciГіn, в firefox solicitГі делает почти 20 aГ±os эту caracterГ-stica без значительных продвижений .

@media speech

speech - remplazo ее versiГіn сейчас deprecada CSS2

@media aural

С этим они завершаются он они происходит queries определенные в Среднем Керьес Нивэль 4

En Средних Керьес Нивэль 3, что estГЎ в процессе obsolesencia, были включенными mГЎs caracterГ-sticas добавочные для других средств как:

Прожекторов

@media projection {
  /* changes/adds the following properties */
  body {
    font-size: 20pt;
    margin-left: 0;
    padding: 0
  }
  body>div {
    page-break-after: always;
    border-style: none;
    margin: 0;
    width: 100%
  }
}
<div>Diapositiva 1</div>
<div>Diapositiva 2</div>

типа Телевидения

@media tv and (min-width: 700px)  {
   div { border: 1px solid red;}
}
<div>Con borde únicamente en televisión</div>

типа Лектората Braile

HTML4 он сделал устаревшие он они происходит queries для лектората пролистанных braile CSS2 @media embossed, для этого definiГі средний показатель query

@media braille {
    h1:before{
      content: 'título';
    }
    p:before{
      content: 'inicio de párrafo';
    }
}
<h1>Ejemplo de contenido apra lector de braile</h1>
<p>Este es un ejemplo de un párrafo</p>

, Если обдумывается pococ в примере verГЎ, что estГЎ подумавший как другая форма distribuciГіn контента, но не estГЎ вознамерившийся о том, чтобы облегчить жизнь тому, кто использует эту tecnologГ - в asistiva. Такой

Терминала как такой браузер

Как HTML originГі с propГіsitos в разуме очень отличные от тех, которых он сейчас выполняет, tambiГ©n в CSS2 по отношению к себе tty имеет средний показатель query для Веб браузеров единственного текста как lynx

@media only tty {
  .my-lynx-css-rule {
    ...
  }
}
<div class=".my-lynx-css-rule">Div disponible para navegadores de solo texto, pero no para navegadores viejos</div>

ВїQuГ© средний показатель queries выносит браузер, с которым я читаю этот artГ-зад?

, Если ты хочешь знать, что типы среднего показателя queries он распознает браузер, который ты используешь, - рекомендуемый соглашаться на эта pГЎgina

Шрифта

  1. w3schools
  2. sympli.io
  3. uxdesign.cc
  4. stackoverflow в inglГ©s
  5. vanseodesign
  6. Очертаний доступности W3
2
ответ дан 24.11.2019, 10:57