CSS, есть ли способ поддерживать одинаковую ширину (физическую ширину устройства) для платформ и устройств - PullRequest
Новая
       13

CSS, есть ли способ поддерживать одинаковую ширину (физическую ширину устройства) для платформ и устройств

1 голос
/ 14 января 2020

Мы знаем, что есть разные способы изменить ширину (или любые свойства) элемента с помощью @media запросов

Мы можем использовать соотношение сторон, ширину и высоту устройства. https://developer.mozilla.org/en-US/docs/Web/CSS/@media

Требование: мы должны поддерживать одинаковую физическую ширину элемента в зависимости от платформы, в Mobile, десктоп или любой элемент DPI должен выглядеть одинаково.

Я пытался использовать em, vw,%, не повезло. Если бы я использовал все это, физический вид элемента будет очень разным от одного устройства к другому. У некоторых устройств оно выглядит маленьким, у некоторых устройств оно большое.

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

Ответы [ 3 ]

2 голосов
/ 14 января 2020

Для рабочего стола с браузерами chrome> = 28, сафари> = 9 IE> = 12 опер> = 14 использовать под медиазапросом. 

@supports (-webkit-appearance:none)

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

@media (max-width:720px) and (orientation:portrait)

Кроме того, в то же время, если вы хотите, чтобы мобильный реагировал в ландшафтном режиме, вы также можете Устраните проблему, используя приведенный ниже медиа-запрос. 

@media only screen and (orientation:landscape)
and (min-device-width: 319px) 
and (max-device-width: 1024px)

В большинстве случаев возникают проблемы с отзывчивостью в проводнике inte rnet, вы можете использовать ниже медиа-запрос. 

@media screen and (min-width:0\0)

Я сам проверил упомянутые выше медиа-запросы, не стесняйтесь, дайте мне знать, если они возникнут. Надеюсь, мое решение поможет вам !!!!!!!!!!!

0 голосов
/ 14 января 2020

Я надеюсь, что это не было недоразумением, но вы хотите, чтобы элемент имел элемент с неизменным размером в реальном измерении независимо от используемого устройства? Как онлайн-линейка?

Если да, то пытались ли вы использовать сантиметры (см) вместо пикселей или процентов? Кажется, что браузеры поддерживают этот блок, но у меня нет инструмента измерения, чтобы проверить его реальный размер. CSS единицы измерения хорошо объяснены в W3. 

<div id="cm"></div>

#cm {
  position: relative;
  margin: 0 auto;
  height: 8cm;
  border: 2px dashed red;
  width: 10cm;
}

Вот код, который может помочь: https://codepen.io/ialexandru/pen/oNgMvXR

0 голосов
/ 14 января 2020

Может быть, вы можете попробовать с vmin и vmax, они основаны на vh и vw, но вам удастся поддерживать очень хорошее соотношение сторон с этими мерами. Я часто использую vmin для более конкретных c измерений, таких как размеры шрифта, размеры изображения и тому подобное. Я бы порекомендовал вам использовать vmax для достижения других видов мер, таких как контейнеры и так далее. Я также использую переменные CSS, чтобы воспользоваться преимуществами этих вещей и уменьшить масштаб некоторых вещей в медиазапросах, также с помощью vmin и vmax я могу пропустить несколько сред. Например, здесь у вас есть небольшой фрагмент размера шрифта 

:root
{
  --text-size: 2.1vmin;
}
.px
{
  font-size: 16px;
}
.vmin
{
  font-size: var(--text-size);
}
@media only screen and (max-width: 700px)
{
  :root
  {
    --text-size: 3.5vmin;
  }
  .px
  {
     font-size: 12px;
  }
}
<p class='px'>Here is the example text with px</p>
<p class='vmin'>Here is the example text with vmin</p>
...