Товаров: 0 (0р.)

Media css min width max width: css — @Media min-width & max-width

Содержание

В чем разница между max-device-width и max-width для мобильного интернета?



Мне нужно разработать несколько страниц html для телефонов iphone/android, но в чем разница между max-device-width и max-width ? Мне нужно использовать разные css для разных размеров экрана.

@media all and (max-device-width: 400px)

@media all and (max-width: 400px)

Какая разница?

css mobile-website media-queries
Поделиться Источник virsir     19 июля 2011 в 12:37

8 ответов

  • Должен ли я использовать max-device-width или max-width?

    С помощью запросов CSS media вы можете использовать max-device-width для таргетинга ширины устройства (например, устройства iPhone или Android) и / или max-width , который нацелен на ширину страницы. Если вы используете max-device-width , то при изменении размера окна браузера на рабочем столе CSS.

    ..

  • В чем разница между шириной устройства и max-device-with?

    В соответствии с W3C функция device-width media описывает ширину поверхности рендеринга выходного устройства. @media all and (max-device-width : 480px) @media all and (device-width : 480px) есть ли какая-то разница между этими двумя ? Если device-width -это ширина поверхности рендеринга и почему…


258

max-width — ширина целевой области отображения, например, браузера

max-device-width -это ширина всей области рендеринга устройства, т. е. фактический экран устройства

То же самое касается max-height и max-device-height , естественно.

Поделиться Ian Devlin     19 июля 2011 в 12:54


83

max-width относится к ширине окна просмотра и может использоваться для определения конкретных размеров или ориентации в сочетании с max-height . Используя несколько условий max-width (или min-width), вы можете изменить стиль страницы по мере изменения размера браузера или изменения ориентации на устройстве, таком как iPhone.

max-device-width относится к размеру окна просмотра устройства независимо от ориентации, текущего масштаба или изменения размера. Это не изменится на устройстве, поэтому его нельзя использовать для переключения таблиц стилей или директив CSS при повороте или изменении размера экрана.

Поделиться voncox     09 августа 2011 в 13:00


16

Что вы думаете об использовании этого стиля?

Для всех точек останова, которые в основном предназначены для «mobile device», я использую min(max)-device-width , а для точек останова, которые в основном предназначены для «desktop», использую min(max)-width .

Есть много «mobile devices», которые плохо вычисляют ширину.

Посмотрите на http://www.javascriptkit.com/dhtmltutors/cssmediaqueries2.shtml :

/* #### Mobile Phones Portrait #### */
@media screen and (max-device-width: 480px) and (orientation: portrait){
  /* some CSS here */
}

/* #### Mobile Phones Landscape #### */
@media screen and (max-device-width: 640px) and (orientation: landscape){
  /* some CSS here */
}

/* #### Mobile Phones Portrait or Landscape #### */
@media screen and (max-device-width: 640px){
  /* some CSS here */
}

/* #### iPhone 4+ Portrait or Landscape #### */
@media screen and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2){
  /* some CSS here */
}

/* #### Tablets Portrait or Landscape #### */
@media screen and (min-device-width: 768px) and (max-device-width: 1024px){
  /* some CSS here */
}

/* #### Desktops #### */
@media screen and (min-width: 1024px){
  /* some CSS here */
}

Поделиться 1ubos     20 декабря 2013 в 09:18


9

max-device-width — ширина рендеринга устройства

@media all and (max-device-width: 400px) {
    /* styles for devices with a maximum width of 400px and less
       Changes only on device orientation */
}

@media all and (max-width: 400px) {
    /* styles for target area with a maximum width of 400px and less
       Changes on device orientation , browser resize */
}

Максимальная ширина-это ширина целевой области отображения, означающая текущий размер браузера.

Поделиться Sarath     19 июля 2011 в 12:49


6

разница в том, что max-device-width — это вся ширина экрана, а максимальная ширина означает пространство, используемое браузером для отображения страниц. Но еще одним важным отличием является поддержка браузеров android, на самом деле, если вы собираетесь использовать max-device-width, это будет работать только в Opera, вместо этого я уверен, что максимальная ширина будет работать для всех видов мобильных браузеров (я тестировал его в Chrome, firefox и opera для ANDROID).

Поделиться

Danny     10 октября 2012 в 10:27

  • CSS media запросов-min-device-width и max-device-width

    У меня есть проблема с добавлением CSS для конкретного устройства. Я запустил свое приложение на этих двух симуляторах: ширина: 320 и высота: 500 ширина: 320 и высота: 588 Теперь моя проблема в том, что CSS всегда используется второй : 320 x 588. Я считаю, что это потому, что он соответствует…

  • CSS разница между (max-width:320px) и (max-device-width:320px)

    Какая разница? (max-width:320px) and (max-device-width:320px) Я пробую максимальную ширину, я думаю, что она работает только при изменении размера окна А max-device-width работает только на мобильном экране? Это правда?


5

max-width -это ширина целевой области отображения, например браузера; max-device-width — это ширина всей области отображения устройства, т. е. фактического экрана устройства.

• Если вы используете max-device-width , при изменении размера окна браузера на рабочем столе стиль CSS не изменится на другой параметр запроса media.;

• Если вы используете максимальную ширину , при изменении размера браузера на рабочем столе параметр CSS изменится на другой параметр запроса media, и вам может быть показан стиль для мобильных телефонов, например меню с сенсорным управлением.

Поделиться Lucky Chaturvedi     01 июля 2016 в 05:12


4

Если вы создаете кросс-платформенное приложение (например, используя phonegap/cordova), то,

Не используйте ширину устройства или высоту устройства. Скорее используйте ширину или высоту в запросах CSS media, потому что устройство Android вызовет проблемы с шириной или высотой устройства. Для iOS это работает нормально. Только android устройства не поддерживают device-width/device-height.

Поделиться Himanshu Garg     26 декабря 2014 в 08:26


2

Больше не используйте device-width/height.

ширина устройства, высота устройства и device-aspect-ratio устарели в запросах Media уровня 4: https://developer.mozilla.org/en-US/docs/Web/CSS/@media#Media_features

Просто используйте width/height (без min/max) в сочетании с ориентацией & (min/max-)resolution для целевых конкретных устройств. На мобильном устройстве ширина/высота должна быть такой же, как device-width/height.

Поделиться SammieFox     09 мая 2016 в 04:32

Похожие вопросы:


смартфон принимает (max-device-width: x), но не (max-width: x)

Я хочу, чтобы мой @media применялся на смартфонах, а также в небольшом браузере windows. Поэтому я хочу использовать второй @media в приведенном ниже фрагменте CSS. @media only screen and…


В чем разница между media запросами max-width и max-device-width?

Возможный Дубликат : В чем разница между max-device-width и max-width для мобильного интернета? Например, этот веб-сайт: http://8faces.com / использует максимальную ширину . В этом учебнике…


Притворяется max-device-width

Для реализации мобильного сайта было бы полезно установить max-device-width в моем браузере. Я знаю плагины для подделки пользовательского агента. Возможно ли это также для max-device-width? Я бы…


Должен ли я использовать max-device-width или max-width?

С помощью запросов CSS media вы можете использовать max-device-width для таргетинга ширины устройства (например, устройства iPhone или Android) и / или max-width , который нацелен на ширину…


В чем разница между шириной устройства и max-device-with?

В соответствии с W3C функция device-width media описывает ширину поверхности рендеринга выходного устройства. @media all and (max-device-width : 480px) @media all and (device-width : 480px) есть ли…


CSS media запросов-min-device-width и max-device-width

У меня есть проблема с добавлением CSS для конкретного устройства. Я запустил свое приложение на этих двух симуляторах: ширина: 320 и высота: 500 ширина: 320 и высота: 588 Теперь моя проблема в том,…


CSS разница между (max-width:320px) и (max-device-width:320px)

Какая разница? (max-width:320px) and (max-device-width:320px) Я пробую максимальную ширину, я думаю, что она работает только при изменении размера окна А max-device-width работает только на…


Конфликт запросов Media с использованием max-device-width и max-width

Я пытаюсь понять, есть ли какой-либо конфликт между использованием max-device-width для указания определенных элементов для того, чтобы веб-сайт был отзывчивым на устройствах, и использованием…


max-device-width и изменение ориентации

У меня есть код ниже: @media all and (max-device-width: 360px) { div { background-color: green; } } @media all and (min-device-width: 361px) and (max-device-width: 640px) { div { background-color:…


Как исправить ошибки css для min-device-width и max-device-width

используя онлайн-валидатор CSS, я пытаюсь проверить CSS своей страницы, но получил следующие 2 сообщения об ошибках: Неизвестная ошибка org.w3c.css.parser.analyzer.ParseException: устаревшая функция…

Max-width, max-height, min-width, min-height — учебник CSS

Несколько уроков назад мы рассматривали свойства width и height для установки фиксированной ширины и высоты элемента. Но современный CSS не ограничивается этими свойствами и предлагает нам намного более гибкую настройку стилей.

Свойства min-width/min-height и max-width/max-height позволяют задавать минимальную и максимальную ширину/высоту соответственно. Разберем их по порядку:

  • min-width — с помощью этого свойства вы можете указать минимальную ширину элемента. Например, если вы зададите блоку стиль min-width: 50px, то ширина блока может стать больше, но она никогда не станет меньше, чем 50 пикселей. Это очень удобно, например, при создании адаптивной верстки, когда при определенных размерах экрана элемент с относительной шириной становится слишком узким. Свойство min-width позволяет предотвратить такие искажения.
  • min-height — работает аналогично предыдущему свойству, но только по отношению к высоте элемента. Безусловно, это тоже очень полезное свойство в практике, которое позволяет задать минимальную высоту элемента.
  • max-width — как вы уже догадались, это свойство позволяет задать максимально допустимую ширину элемента. Например, элемент со стилем max-width: 960px может иметь ширину меньше максимальной, но он никогда не станет больше, чем 960 пикселей. Данное свойство удобно использовать при создании адаптивной разметки, когда вам необходимо, чтобы элемент адаптировался под ширину экрана любого устройства, но при этом не слишком широко разъезжался на больших экранах.
  • max-height — работает аналогично предыдущему свойству, только по отношению к высоте. Но, как мы уже говорили ранее, лучше не играть с ограничением высоты элемента без крайней надобности.
  • auto — это значение можно использовать для отмены действия свойства.

Итак, все эти свойства позволяют легко контролировать допустимые размеры элементов, при этом не фиксируя их намертво, как это делают обычные свойства width и height. Их можно комбинировать, задавая для одного элемента минимальную и максимальную ширину/высоту. Значения можно устанавливать в любых единицах измерения CSS. Словом, все возможности для реализации очень гибкой верстки.


div {
	width: 100%;
	min-width: 100px;
	max-width: 600px;
}
Что с кроссбраузерностью?

Поддержка браузерами свойств max-width, max-height, min-width, min-height практически стопроцентная. Данную запись не понимает только Internet Explorer 6.

Далее в учебнике: «плавающие» элементы и свойство float.

Min width и max width css – Тарифы на сотовую связь

Значения свойствШирина
min-widthwidth>max-widthmin-width
min-width>widthwidthmin-width
min-width>max-widthmin-width
min-widthwidth ) меньше значения min-width , то ширина элемента принимается равной min-width .