Що означає екран @media та (max-width: 1024px) у CSS?

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

@media screen and (max-width: 1024px){
    img.bg {
        left: 50%;
        margin-left: -512px; }
}

Зокрема, що відбувається на першому рядку?

Це медіа-запит. Це не дозволяє запускати CSS всередині нього, якщо браузер не пройде тести, які він містить.

Тести цього медіа-запиту:

1. @media screen- Браузер ідентифікує себе як категорію "екран". Це приблизно означає , що браузер вважає себе настільним клас - на відміну , наприклад , в старшому мобільному браузері телефону (зверніть увагу , що iPhone та інші смартфони браузери, дійсно ідентифікують себе як в категорії екрану), або екран - і що він показує сторінку на екрані, а не надрукувати її.

2. max-width: 1024px- ширина вікна браузера (включаючи смугу прокрутки) становить 1024 пікселів або менше. ( Пікселі CSS, а не пікселі пристрою .)

Цей другий тест дозволяє припустити, що це обмеження CSS для iPad, iPhone та подібних пристроїв (оскільки деякі старі браузери не підтримують max-widthмедіа-запити, а багато настільних браузерів працюють ширше 1024 пікселів).

Однак він також застосовуватиметься до вікон браузера настільних пристроїв шириною менше 1024 пікселів, у браузерах, які підтримують max-widthмедіа-запит.

Ось специфікація медіа-запитів, вона досить читабельна:

• http://www.w3.org/TR/css3-mediaqueries/

Це обмежує визначені там стилі екраном (наприклад, не друкованим або іншим носієм інформації) і додатково обмежує область застосування вікон перегляду, які мають ширину 1024 пікселів або менше.

http://www.css3.info/preview/media-queries/

У ньому написано: Коли сторінка відображається на екрані з роздільною здатністю не більше 1024 пікселів, тоді застосовуйте правило, яке слідує.

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

Подивіться тут деталі ..

У моєму випадку я хотів зосередити свій логотип на веб-сайті, коли у браузера є 800pxабо менше, тоді я зробив це за допомогою @mediaтегу:

@media screen and (max-width: 800px) {
  #logo {
    float: none;
    margin: 0;
    text-align: center;
    display: block;
    width: auto;
  }
}

Це працювало для мене, сподіваюся, що хтось знайде це рішення корисним. :) Для отримання додаткової інформації дивіться це .

Це медіа-запити . Це дозволяє застосовувати частину правил CSS лише до певних пристроїв певної конфігурації.

Це означає, що якщо розмір екрана становить 1024, тоді застосовуватимуться лише під правилами CSS.

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

max-width є вашим максимальним обмеженням CSS до цієї ширини.

Також варто відзначити, що ви можете використовувати "em", а також "px" - це роблять блоги та текстові сайти, оскільки тоді браузер приймає рішення щодо розмітки більш відносно текстового вмісту.

У Wordpress twentysixteen я хотів, щоб мій логотип відображався як на мобільних, так і на настільних комп'ютерах, тому я ставлю це у моєму дитячому стилі.css

@media screen and (max-width:59em){
    p.site-description {
        display:    block;
    }
}

Він націлений на якусь задану функцію для виконання деяких інших кодів ...

Наприклад:

@media all and (max-width: 600px) {
  .navigation {
    -webkit-flex-flow: column wrap;
    flex-flow: column wrap;
    padding: 0;

  }

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