Проблема ширины страницы при использовании медиа-запросов

Question

У меня проблема с шириной страницы в адаптивном дизайне при использовании @media.

Я настроил свой дизайн следующим образом:

@media only screen and (max-width : 400px), screen and (min-width: 400px) and (max-width: 800px) and (orientation: portrait){

}

Это работало нормально, пока я не сделал несколько обновлений настроек ширины.Ранее у меня была настройка минимальной ширины элемента на 400 пикселей, так как я не хотел, чтобы страница уменьшалась ниже 400 пикселей.Затем он будет настраиваться и расширяться, как я хотел, между 400-800px.

Однако я изменил его так, чтобы элементы были установлены на ширину 100% для значений ниже 400px, а также 400-800px, чтобы экранбудет автоматически соответствовать любому мобильному телефону.

Однако по какой-то причине у меня сейчас возникает следующая проблема.

Когда ширина экрана становится меньше 800px, ширина страницы автоматически устанавливается равной 859px по ширине и сохраняется до тех пор, пока она не опустится ниже 400px, после чего ширина страницы автоматически установится в 425px.

В обоих случаях это фиксируется с помощью и не регулируется по ширине экрана.

Я не могу найти больше нигде с такой проблемой, и я действительно не понимаю, почему.Мне кажется, что когда страница корректируется, она берет точки «400px» и «800px» и устанавливает все элементы со 100% шириной в эти значения.Дополнительные 25px и 59px могут быть полями или чем-то еще.

У меня также есть одно изображение, которое установлено на 30% ширины страницы, и оно также принимает его размер с 425 пикселей и 859 пикселей соответственно.

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

Answer 1

Спасибо за ваши ответы.

Оказалось сочетанием вещей.

Во-первых, для моего обычного дизайна было установлено значение max-width: 80%, и хотя я установил ширину медиазапроса на 100%, мне также потребовалось указать max-width: 100%.

Другая проблема заключалась в том, что в браузерах для вашего тела по умолчанию установлены минимальная ширина и минимальная высота. Они были включены и настроены на 420px.

После того, как были сделаны оба этих измененияпроблема была решена.

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

Если вы хотите изменить минимальную-width и height, перейдите к пункту «inspect» (в chrome, схожи параметры в других браузерах, затем вкладка elements. Найдите ваш элемент «body», и он будет отображать значения min-width и min-height, если они включены.Чтобы отключить их, просто выберите элемент body, десять на вкладке «elements» справа, наведите курсор на минимальную высоту и минимальную ширину, и есть флажок для включения и выключения.

Проверил в другихбраузеры и методы похожи.

Еще раз спасибо за ваши предложения

Rich

Answer 2

это правильный формат для медиазапроса, и я дал несколько общих размеров для разных платформ, которые вы можете использовать.

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {...} 

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {...} 

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {...} 

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {...} 

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {...}

Если вы хотите немного глубже, помните, что and требует, чтобы все условия были выполнены для использования css внутри.Я бы порекомендовал вместо этого взглянуть на оператор or или использовать комбинацию and и or для выполнения условий, которые наилучшим образом соответствуют вашим потребностям.

Надеюсь, что это поможет.