медиа-запросы: ограничить некоторые стили CSS в соответствии с размером экрана

когда я пишу какой-то стиль в layout.css, он применяется в каждом размере экрана и в разделе / ​​* #Media Queries, у вас есть следующие разделы:

/* Smaller than standard 960 (devices and browsers) */ /* Tablet Portrait size to standard 960 (devices and browsers) */ /* All Mobile Sizes (devices and browser) */ /* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */ 

поэтому никто из них не делает то, что я хочу.

Где я должен писать большие кодовые коды CSS?

предположим, что у вас есть div как

теперь напишите css для .example который будет применяться для тех экранов, которые больше, чем диапазон, упомянутый в медиа-запросе

 .example{ /*..for larger screen style goes here....*/ } @media screen and (max-width: 1400px) { .example { /*...now give style for those screen which are less than 1400px...*/ } } @media screen and (max-width: 1300px) { .example { /*...now give style for those screen which are less than 1300px...*/ } } 

в приведенном выше кодексе вы указываете три разных стиля для

  1. > Размер экрана 1400px
  2. для размера экрана от 1300 до 1400 пикселей
  3. <1300px размер экрана

РЕДАКТИРОВАТЬ::

“/ * Больше, чем стандартный 960 (устройства и браузеры) * /”

 .example{ /*..style for larger than 960px....*/ } @media screen and (max-width: 960px) { .example { /*..style for lesser than or equal to 960 px...*/ } }