Jump to content
  • 0

@media screen and (max-width: ***px)


stDragon
 Share

Question

Наверно глупый вопрос, но я не совсем понимаю при прогрессивной верстке

/*==общий код для самых маленьких дисплеев==*/

@media screen and (max-width: 480px){

телефоны

}

@media screen and (max-width: 768px){

планшеты

}

@media screen and (max-width: 992px){

мониторы

}

у нас сверху вниз наследование происходит? то есть 768 будет в себя включать 480 или же там надо будет все это про дублировать еще раз.

Интересуюсь с целью сокращения кода. если наследуется то супер.

Link to comment
Share on other sites

7 answers to this question

Recommended Posts

  • 0

Стили не будут наследоваться, так как не выполняется часть условия, а именно (max-width: 480px). То есть, если ширина будет 481px, то она уже не входит в этот диапазон (от нуля до 480).

Edited by mrnobody
Link to comment
Share on other sites

  • 0

Не правильно. Модель Вами описанная правильна, просто надо переопределять каждый раз значения внутри каждого из блоков.

ну так если переопределять это будут излишнее переопределение и дополнительный трафик. мне кажется это хоть и более стабильно, но не совсем правильно, я как-то стараюсь придерживаться концепции ООП

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

  • Similar Content

    • By SelenIT
      Подумалось тут в развитие старой темы.
      По сути, используя инлайн-блоки со «скукоженными» пробелами между ними, мы ведь пытаемся эмулировать «новые» флексбоксы (в т.ч. в многострочном режиме — flex-flow: row wrap) с flex: none. И у нас есть надежное средство «скукожить» пробелы везде, кроме вебкита (отриц. word-spacing с запасом), лекарство для старых вебкитов (display: table для контейнера) и... собственно флексбоксы в новых вебкитах (Хром-Канарейка и т.п.) . А также @supports, чтобы все остальные могли перейти со старых костылей на правильный флексбокс, как только смогут сделать это наверняка.
      Тем самым мы избавляемся от подгонки «магических» значений для двух похожих, но сильно неодинаковых по действию свойств (word-spacing и letter-spacing) и, по идее, получаем решение, с которым история как в ссылке выше уже точно не приключится. Старые костыли будут использоваться только в старых браузерах, где баги/фичи, на которых они основываются, заведомо работают. А новые браузеры будут плавно переходить на стандартное решение, не требующее костылей. Чем не прогрессивное улучшение? Правда, в новых вебкитах (и будущих браузерах) и всём остальном задача решается разными технологиями — но фактическое поведение очень похоже. Причем старая технология, можно сказать, проверена временем, а новая зато специально «заточена» именно для этой задачи.
      Прошу посмотреть пример (я взял за основу те же YUI Grids, откуда расползлись эти загадочные -.43em) и покритиковать идею и реализацию
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy