Screen css width: html — How to get current screen width in CSS?

Leave a Comment / Css / By /

Под какие основыные размеры настраивать CSS @media screen? — Хабр Q&A

Всегда использую эти( это старые брэйкпоинты bootstrap по умолчанию ):

/* Large desktops and laptops */
media (min-width: 1200px) {

}

/* Portrait tablets and medium desktops */
media (min-width: 992px) and (max-width: 1199px) {

}

/* Portrait tablets and small desktops */
media (min-width: 768px) and (max-width: 991px) {

}

/* Landscape phones and portrait tablets */
media (max-width: 767px) {

}

/* Landscape phones and smaller */
media (max-width: 480px) {

}

По надобности дописую промежуточные разрешения, если вдруг по дизайну что то падает на 650px, тогда дописую:

media (max-width: 650) {

}

Ответ написан

Для себя обычно беру наиболее распространенные (desktop first):

1200px
992px
768px
480px
320px

Ответ написан

я всегда смотрю на сайте какие медия более популярны.
по стандарту использую такую сетку:

1200 +
980 — 1199
769 — 979
640 — 768 (чтоб мелкие таблеты в portrait могли получить визуализацию эдентичную телефонам)
до 639 или 640 (зависит от проекта)
иногда добавляю 320 и 480

когда проект большой беру сетку бутстрапа и допиливаю

Ответ написан

Комментировать

Погуглите самые популярные разрешения для разных устройств (мобильники, планшеты). И выберите для себя 2-3 стоп-точки, на которых вы будете менять стили. Вот и весь секрет.

Ответ написан

В свое время тоже задавался таким вопросом, и решил взять за стандарты breakpoints у twitter bootstrap. В этой ссылке приведены breakpoints для различных устройств, их и можете взять bootstrap-ru.com/scaffolding.php#responsive
А вообще, когда начал верстать адаптивные макеты, понял, что лучше не равняться на конкретные breakpoints устройств, а писать их по мере необходимости (сжимаемости) сайта.

Ответ написан

более трёх лет назад

Комментировать

Многое зависит от типа вашего сайта. Если речь идет о каком-нибудь контентном сайте (новости/блог/что-то еще с разношерстной структурой) то тут не обойтись без нескольких мобильных диапазонов (мелкие мобильники, лопаты, планшеты). Если же речь идет о каком-нибудь простом лэндинге, где вся информация представлена «линейно» в вертикальном потоке, то без особых проблем можно взять за основу один брейкпоинт max-width: 921px и делать адаптив под него. + если вы хотите сделать не абы что, вам понадобится дизайнер, который вам нарисует хотя бы мокап мобильной версии.

Ответ написан

более трёх лет назад

Комментировать

Большинство устройств попадают под 3 медиа:
media (min-width: 768px) and (max-width: 979px) {}
media (min-width: 481px) and (max-width: 767px) {}
media (max-width: 480px) {}

Ответ написан

Комментировать

Согласен с Сергеем (@dpr), привязываться к популярным разрешениям проблематично, так как понадобиться подгонять некоторые элементы. При разработке с нуля пользуюсь этим способом наоборот, так как разрабатываю по принципу «мобильные первые», но суть неизменна.

Ответ написан

более трёх лет назад

Не понимаю в чем суть всех вышеуказанных брекпоинтов, достаточно трех:

@media (max-width: 425px) {
	/* MOBILE */
}
@media (min-width: 425px) and (max-width: 1024px){
	/* TABLET */
}
@media (min-width: 1024px) {
	/* DESKTOP */
}

Ответ написан

css — Размер и расположение элементов в зависимости от ширины окна

У меня странный вопрос. На моей странице есть основное изображение планеты в какой-то сверхмощной туманности. Я настроил так, что минимальная ширина составляет 1000 пикселей, а максимальная — 1500 пикселей. У меня бока исчезают, и это отлично смотрится с большими экранами. То, что я хотел бы попытаться сделать, это когда вы смотрите на него, например, на мобильном устройстве, и оно обрезает ширину до 1000 пикселей, я бы хотел, чтобы изображение имело ширину 1300 пикселей, центрировано и 150 пикселей обрезается с каждой стороны, поэтому вы вообще не можете видеть исчезновение, но все же можете затем увеличить, если ширина окна становится больше, скажем, как у большого iMac, и это исчезновение снова становится видимым, как только вы проходите эту ширину 1300 пикселей.

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

Это конкретный раздел кода со страницы, хотя html и css доступны для всеобщего обозрения, вы можете просто использовать команду Fine, чтобы найти этот идентификатор div для дальнейшего поиска.

 <дел>
   <дел>

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

  • css
  • позиционирование

9

Единицы области просмотра для CSS 

 1vw = 1% ширины области просмотра
1vh = 1% высоты области просмотра

Таким образом, вам не нужно писать много разных медиа-запросов или javascript.

Если вы предпочитаете JS 

 window.innerWidth;
окно.внутренняя высота;

0

Вот реальная реализация того, что вы описали. Я немного переписал ваш код, используя последние лучшие практики для реализации is. Если вы измените размер окна браузера ниже

1000px , левая и правая стороны изображения будут обрезаны с использованием отрицательных полей, и оно станет уже на 300px .

 <стиль>
   .контейнер {
      положение: родственник;
      ширина: 100%;
   }
   .bg {
      должность: родственница;
      z-индекс: 1;
      высота: 100%;
      минимальная ширина: 1000 пикселей;
      максимальная ширина: 1500 пикселей;
      поле: 0 авто;
   }
   .туманность {
      ширина: 100%;
   }
   Экран @media и (максимальная ширина: 1000 пикселей) {
      .туманность {
         ширина: 100%;
         переполнение: скрыто;
         поля: 0–150 пикселей 0–150 пикселей;
      }
   }

<дел>
   <дел>