@Media min-width & max-width

225

У мене є така @mediaнастройка:

HTML :

<head>
  <meta name="viewport" content="width=device-width, user-scalable=no" />
</head>

CSS :

@media screen and (min-width: 769px) {
    /* STYLES HERE */
}

@media screen and (min-device-width: 481px) and (max-device-width: 768px) { 
    /* STYLES HERE */
}

@media only screen and (max-device-width: 480px) {
    /* STYLES HERE */
}

За допомогою цієї установки він працює на iPhone, але він не працює у браузері.

Це тому, що у мене вже є deviceмета, а може, і max-width:480pxзамість цього?

css mobile media-queries

— ралібілен
джерело

1

У чому полягає проблема - стилі за замовчуванням застосовуватимуться до екранів ширше 769 пікселів.

— Gurpreet Singh

просто видаліть @media screen and (min-width:769px){свої звичайні стилі браузера

— Zoltan Toth,

Що ти маєш на увазі Золтан? І я думаю, що я міг би це вирішити. По-перше, проблема полягала в тому, що коли я змінив розмір свого браузера на max-пристрої - він працював на телефоні, але не в браузері, без "пристрою" він працює в обох.

— rallybilen

Так що в основному з "пристрою" він працює як у мобільному / браузері, але коли я додаю пристрій, я не бачу його у браузері \

— rallybilen

1

Це має бути 980pxне 960тому, що розмір браузера закінчується на 980px.

339

Я знайшов найкращий метод - написати ваш CSS за замовчуванням для старих браузерів, оскільки для старих браузерів, зокрема 5,5, 6, 7 і 8. Не вдається прочитати @media. Коли я використовую @media, я використовую це так:

<style type="text/css">
    /* default styles here for older browsers. 
       I tend to go for a 600px - 960px width max but using percentages
    */
    @media only screen and (min-width: 960px) {
        /* styles for browsers larger than 960px; */
    }
    @media only screen and (min-width: 1440px) {
        /* styles for browsers larger than 1440px; */
    }
    @media only screen and (min-width: 2000px) {
        /* for sumo sized (mac) screens */
    }
    @media only screen and (max-device-width: 480px) {
       /* styles for mobile browsers smaller than 480px; (iPhone) */
    }
    @media only screen and (device-width: 768px) {
       /* default iPad screens */
    }
    /* different techniques for iPad screening */
    @media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
      /* For portrait layouts only */
    }

    @media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
      /* For landscape layouts only */
    }
</style>

Але ви можете робити все, що завгодно, за допомогою свого @media. Це лише приклад того, що я знайшов для мене найкращим під час створення стилів для всіх браузерів.

Специфікації iPad CSS

Також! Якщо ви шукаєте для друку, ви можете використовувати@media print{}

— башлей
джерело

16

Чому ви поставили екрани "mac"? Це не лише "дивовижні" Маки, які можуть мати великі екрани з високою роздільною здатністю!

— Лука

38

Основна проблема - використання max-device-widthзвичайного старого max-width.

Використання ключового слова "пристрій" націлює фізичний розмір екрана, а не ширину вікна браузера.

Наприклад:

@media only screen and (max-device-width: 480px) {
    /* STYLES HERE for DEVICES with physical max-screen width of 480px */
}

Проти

@media only screen and (max-width: 480px) {
    /* STYLES HERE for BROWSER WINDOWS with a max-width of 480px. 
       This will work on desktops when the window is narrowed.  */
}

— jpostdesign
джерело

11

Якщо веб-сайт на маленьких пристроях веде поведінку на зразок екрану робочого столу, тоді вам доведеться поставити цей метатег у заголовок раніше

<meta name="viewport" content="width=device-width, initial-scale=1">

Для медіа-запитів ви можете встановити це як

це покриє всі ваші мобільні / мобільні телефони

    @media only screen and (min-width: 200px) and (max-width: 767px)  {
    //Put your CSS here for 200px to 767px width devices (cover all mobile portrait width //

    }

Для iPad та iPad pro потрібно використовувати

    @media only screen and (min-width: 768px) and (max-width: 1024px)  {
    //Put your CSS here for 768px to 1024px width devices(covers all iPad portrait width //

    }

Якщо ви хочете додати css для ландшафтного режиму, ви можете додати це

та (орієнтація: пейзаж)

  @media only screen and (min-width: 200px) and (max-width: 767px) and (orientation : landscape) {
        //Put your CSS here for 200px to 767px width devices (cover all mobile landscape width //

        }

— Рохіт Каушик
джерело

8

Правильне значення contentатрибута має містити initial-scaleнатомість:

<meta name="viewport" content="width=device-width, initial-scale=1">
                                                   ^^^^^^^^^^^^^^^

Розгорніть фрагмент

— Ксенія Титова
джерело

2

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

— Майкл Бенджамін

2

@Michael_B Початково було "користувальницьке масштабування = ні". Це говорить про все, що я думаю.

— Аполо Радомер

0

для деяких iPhone ви повинні поставити свій огляд перегляду таким чином

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, shrink-to-fit=no, user-scalable=0" />

— NuggaN85
джерело