如何使用 css 修复响应式设计问题 [英] How to fix responsive design issue with css

问题描述

我正在创建一个响应式登录页面.我在 CSS 中提到了不同屏幕尺寸的不同设置.我已经提到了 3 种屏幕尺寸，即 max-width 320、max-width 375 和 max-width 780.然而，屏幕宽度为 320 的手机正在从 css 中获取屏幕宽度 375px 的属性.

I am creating a responsive landing page. I have mentioned different settings for different screen size in CSS. I have mentioned 3 screen sizes, i.e. max-width 320, max-width 375 and max-width 780. However phone having screen width 320 is taking the properties of screen width 375px from the css.

<style>
@media only screen and (max-width: 320px)
{
div.auto-style16 {
height: 95px;
padding-top: 10px;
}
}


@media only screen and (max-width: 375px)
{
div.auto-style16 {
height: 55px;
padding-top: 0px;
}
}


@media only screen and (max-width: 780px)
{
div.auto-style16 {
height: 5px;
padding-top: 30px;
}
}
</style>

根据上面的代码，最大宽度为 320 像素的手机，高度应为 95 像素.同样，最大宽度为 375 像素的手机应采用 55 像素的高度.但是，最大宽度为 320 像素的手机的高度为 55 像素(实际上是最大宽度为 375 像素).

As per the above code, a phone having max-width 320px, should take the height 95px. Similarly a phone having max-width 375px should take the height 55px. However a phone with max-width 320px is taking height 55px (which is actually for max-width 375px).

推荐答案

正确的顺序应该是这样的:

the correct order should be like this:

@media only screen and (max-width: 780px) {
  div.auto-style16 {
    height: 5px;
    padding-top: 30px;
  }
}

@media only screen and (max-width: 375px) {
  div.auto-style16 {
    height: 55px;
    padding-top: 0px;
  }
}

@media only screen and (max-width: 320px) {
  div.auto-style16 {
    height: 95px;
    padding-top: 10px;
  }
}

这篇关于如何使用 css 修复响应式设计问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！