Хотите знать правильный (лучший) способ написать (код) css для разных ширины окна.css. Как написать (код) css для разных ширины окна?
Вот живой пример https://jsfiddle.net/q0ony7Lb/16/
Например, у Левой, правой боковых панелей и основное содержание (#middle).
<div id="left">Content in left div<br/></div>
<div id="middle">Content in middle div<br/></div>
<div id="right">Content in right div<br/></div>
Если ширина вдове меньше или равна 400px, то хочу показать только #middle.
Если ширина больше 400px и равна 700px, тогда отображать #middle и #left.
Если ширина больше 700px, тогда отобразите все.
В настоящее время делают таким образом:
1) записи по умолчанию CSS (как понимать CSS «по умолчанию» применяется, если нет других правил внутри соответствующих @media screen). По умолчанию css, как
#left {background-color:#fff; background-repeat:repeat; background-position:left top; width:180px; height:25px; font-size:16px; font-family:Verdana; color:black; border-style:solid; border-width:1px; border-color:#000; text-align:left; padding:0px 0px 0px 0px; }
2) Для определенной ширины окна напишите специальные правила css. Как
@media screen and (max-width: 400px) {
#left, #right { display:none}
#middle { width:350px; height:75px; }
}
@media screen and (min-width: 401px) and (max-width: 700px) {
#right { display:none}
}
В результате, например, если ширина окна меньше или равна 400px затем скрыть обе боковые панели и #middle изменяет размер.
Как я вижу, применяет значения css от «по умолчанию», и если внутри @media screen and (max-width: 400px) { существуют разные значения из «по умолчанию», тогда применяются разные значения (разные значения меняют значения по умолчанию).
Кажется, все работает. Но может быть какой-то лучший способ сделать все?
Другим способом может быть запись (повторение) целых правил для каждой ширины окна. И не записывайте значения по умолчанию. Но в таком случае код будет длиннее ....
Что вы хотите сказать? Да, в принципе, как вы это делаете. –
Я предпочитаю 'jquery' для анимационной веб-страницы. Но если изменится только простой 'css', я думаю, что' @ media' лучше. Однако 'bootstrap' является мощной библиотекой' css' –
@torazaburo Вопрос: «Если способ, как я это делаю, в порядке?» Просто хочу проверить. Написал несколько вариантов и кажется немного беспорядок в моей голове. Поэтому хочу проверить, как это сделать лучше. – user2118559