Относительно CSS Media Query

Question

Сначала я создал веб-сайт для мобильных устройств, но я действительно смущен, добавив отдельную css для настольной версии.

Должен ли я просто поместить весь свой код для максимальной ширины-500px и написать отдельную CSS для настольный

Answer 1

Существует несколько возможных подходов.

1. Использование медиазапросов в одном файле
2. Использование разных листов CSS в зависимости от ширины устройства
3. Использование препроцессор стиля, такой как SASS или S CSS

Медиа-запрос:

Это изменит bgcolor в зависимости от высоты экрана

p {
  padding: 1em;
  background: #55f;
}

@media only screen and (max-height: 500px) {
  p {
    background: #f55;
  }
}

<p>Switch to full page view to see this change</p>

Различные таблицы стилей

Добавляя некоторые медиазапросы к тегам <link />, вы можете загружать различные таблицы стилей в зависимости от размера экрана и еще много чего.

<link rel="stylesheet" href="master.css" />
<link rel="stylesheet" media="(min-width: 1025px)" href="desktop.css" />
<link rel="stylesheet" media="(max-width: 1024px)" href="mobile.css" />

CSS Препроцессоры

Есть несколько отличных вариантов, касающихся этого. Я не очень хорошо разбираюсь в них, но я бы порекомендовал провести какое-то исследование и выбрать то, которое вам наиболее удобно.

Answer 2

То, как вы хотите создать свой веб-сайт, мы называем его ПЕРВЫЙ ПОДХОД В МОБИЛЕ Итак, в этом сценарии вы можете просто создать свой веб-сайт на мобильном устройстве и написать свой код CSS без каких-либо медиа-запрос.

как только вы закончите с мобильным просмотром, затем измените все в медиа-запросе, используя селектор min-width.

, вам просто нужно изменить CSS для вашего настольная версия.

Таким образом, ваш код CSS будет выглядеть следующим образом.

 All your css without any media query, what ever you need.

, а затем

 @media(min-width:480px){
    all your desktop changes will go here.
 }

, поэтому min-width медиа-запрос будет работать над вашим выбранная точка останова, в данном случае выше 480px.

Помните, что вы можете использовать несколько точек останова для мультимедиа, и 480 также можно изменить, поэтому измените эту точку в соответствии с вашими потребностями.

Есть много учебников и статьи для этого, вы можете проверить этот.

Answer 3

Вы можете поместить стили рабочего стола внизу, используя правило:

@media screen and (min-device-width: 425px) {
  /* css desktop rules */
}

425px как минимальный размер Chrome для рабочего стола. Я рекомендую использовать препроцессор стиля css (например, SASS), чтобы иметь возможность вкладывать правила и импортировать стили в отдельный файл (@import ...).

Answer 4

Если вы работаете с мобильными устройствами, сначала напишите свой CSS для мобильных устройств, а затем используйте медиазапросы минимальной ширины при увеличении.