如何使用 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屋!