堆栈内存溢出
  繁体   English   中英

我的CSS中只有两个媒体查询断点可以工作。.为什么其余的也不能工作？

[英]Only two media query breakpoints in my css work..why doesn't the rest also work?

 原文  2016-08-11 21:41:18  9   1    html/ css/ media-queries/ breakpoints

问题描述

我的问题是，为什么仅iPhone的最小和最大宽度会加载到我的CSS中，而我的iPad的最小和最大宽度却不会加载？ 我知道我所有的CSS都可以单独工作，但不能一起工作。 我也尝试使用多个样式表来代替，但是我遇到了同样的问题..只有最后两个样式表可以加载。 

<head>
<title></title>

<meta charset="UTF-8"/>

<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

<link rel="stylesheet" type="text/css" href="css/stylesheet.css?v=1"/>

</head>




container, header, menu, home-info {
display: inline-block;
}


body {
background-color: pearl white;
}


#container {
width: 50%;
height: 800px;
background-color: white;

position: fixed;
transform: translateX(-50%);
left: 50%;
box-shadow:  0 0 75px 0px rgba(12, 3, 25, 0.8);
margin-bottom: 5px;
}

.header {
height: 200px;
width: 100%;
color: white;
transform: translateX(-50%);
left: 50%;
position: absolute;
text-align: center;
font-size: 220px;
background-color: grey;

}



.menu {
position: absolute;
top: 205px;
left: 50%;
transform: translateX(-50%);
padding: 5px;

}

.menu ul{
margin: 0;
padding: 0;
float:left;

}

.menu ul li{
float:left;
list-style:none;
position:relative;
}
.menu ul li a{

display:block;

    text-decoration:none;
    padding:10px 10px;
    text-align:center;
    width: 775px;
    height: 25px;
    background-color: silver;
    font-size: 25px;
    border-radius: 5px;
    color: white;
}
.menu ul li a:hover{

    background: yellow;
    color: #00357d;
    box-shadow: 5px 5px 25px 5px yellow;
}

.menu ul ul{

    visibility:hidden;
    position:absolute;
}
.menu ul li:hover ul{

visibility:visible;
}




.menu ul ul li a:hover {

background: yellow;
color: #00357d;

}
.menu ul ul ul  {

visibility: hidden;
position: absolute;

}
.menu ul ul li:hover ul {

visibility: visible;
}



.menu ul ul ul li a:hover {

background: yellow;
color: #00357d;

}
.menu ul ul ul ul  {

visibility: hidden;
position: absolute;

}
.menu ul ul ul li:hover ul {

visibility: visible;
}

.menu ul ul ul ul li a:hover {

background: yellow;
color: #00357d;

}
.menu ul ul ul ul ul  {

    visibility: hidden;
    position: absolute;

}
.menu ul ul ul ul li:hover ul {

    visibility: visible;
}

.home-info {
color: grey;
font-size: 20px;
top: 550px;

position: absolute;

margin-left: auto;
margin-right: auto;

}

/*max-ipads*/

@media only screen and (max-width: 1024px){

    #container {
    width: 50%;
    height: 800px;
    background-color: white;

    position: fixed;

    transform: translateX(-50%);
    left: 50%;
    box-shadow:  0 0 75px 0px rgba(12, 3, 25, 0.8);
    margin-bottom: 5px;
}
}
@media only screen and (max-width: 1024px){
.header {

position: absolute;
    height: 100px;
    width: 100%;
    color: white;
    transform: translateX(-50%);
    left: 50%;

    text-align: center;
    font-size: 105px;
    background-color: grey;
}
}
@media only screen and (max-width: 1024px){
.menu {

position: absolute;

    top: 75px;
    left: 50%;
    transform: translateX(-50%);
    padding: 5px;

}
}
@media only screen and (max-width: 1024px){
.menu ul li a{

display:block;

    text-decoration:none;
    padding:10px 10px;
    text-align:center;
    width: 350px;
    height: 15px;
    background-color: silver;
    font-size: 25px;
    border-radius: 5px;
    color: white;
}
}
@media only screen and (max-width: 1024px){
.home-info {
color: grey;
font-size: 15px;
top: 420px;

position: absolute;

margin-left: auto;
margin-right: auto;
}
}

/*---min-width---*/

@media only screen and (min-width: 768px){
#container {
width: 50%;
height: 1024px;
background-color: white;

position: fixed;

transform: translateX(-50%);
left: 50%;
box-shadow:  0 0 75px 0px rgba(12, 3, 25, 0.8);
margin-bottom: 5px;
}
}
@media only screen and (min-width: 768px){
.header {

height: 80px;
width: 100%;
background-color: grey;
color: white;
transform: translateX(-50%);
left: 50%;

position: absolute;

text-align: center;
font-size: 80px;
}
}
@media only screen and (min-width: 768px){
.menu {

position: absolute;

top: 55px;
left: 50%;
padding: 5px;
transform: translateX(-50%);
}
}
@media only screen and (min-width: 768px){
.menu ul li a{

display:block;

    text-decoration:none;
    padding:10px 10px;
    text-align:center;
    width: 480px;
    height: 25px;
    background-color: silver;
    font-size: 15px;
    border-radius: 5px;
    color: white;
}
}
@media only screen and (min-width: 768px){
.home-info {

color: grey;
font-size: 21px;
top: 430px;

position: absolute;

margin-left: auto;
margin-right: auto;
}
}

/*iphones-max*/

@media only screen and (max-width: 480px){
#container {

width: 50%;
height: 350px;
background-color: white;

position: fixed;

transform: translateX(-50%);
left: 50%;
box-shadow:  0 0 75px 0px rgba(12, 3, 25, 0.8);
margin-bottom: 5px;
}
}
@media only screen and (max-width: 480px){
.header {

height: 50px;
width: 100%;
color: white;
transform: translateX(-50%);
left: 50%;

position: absolute;

text-align: center;
font-size: 50px;
background-color: grey;
}
}
@media only screen and (max-width: 480px){
.menu {

position: absolute;

top: 55px;
left: 50%;
transform: translateX(-50%);
padding: 5px;

}
}
@media only screen and (max-width: 480px){
.menu ul li a{

display:block;

    text-decoration:none;
    padding:10px 10px;
    text-align:center;
    width: 125px;
    height: 15px;
    background-color: silver;
    font-size: 10px;
    border-radius: 5px;
    color: white;
}
}
@media only screen and (max-width: 480px){
.home-info {

color: grey;
font-size: 10px;
top: 270px;

position: absolute;

margin-left: auto;
margin-right: auto;
}
}

/*smartphone-min*/

@media only screen and (min-width: 320px){
#container {

width: 50%;
height: 420px;
background-color: white;

position: fixed;

transform: translateX(-50%);
left: 50%;
box-shadow:  0 0 75px 0px rgba(12, 3, 25, 0.8);
margin-bottom: 5px;
}
}
@media only screen and (min-width: 320px){
.header {

height: 80px;
width: 100%;
background-color: grey;
color: white;
transform: translateX(-50%);
left: 50%;

position: absolute;

text-align: center;
font-size: 80px;
}
}
@media only screen and (min-width: 320px){
.menu {

position: absolute;

left: 50%;
padding: 5px;
transform: translateX(-50%);
margin-top: 30px;
}
}
@media only screen and (min-width: 320px){
.menu ul li a{

display:block;

    text-decoration:none;
    padding:10px 10px;
    text-align:center;
    width: 200px;
    height: 25px;
    background-color: silver;
    font-size: 10px;
    border-radius: 5px;
    color: white;
}
}
@media only screen and (min-width: 320px){
.home-info {

color: grey;
font-size: 10px;
top: 320px;

position: absolute;

margin-left: auto;
margin-right: auto;
}
}

1 个解决方案

解决方案1
 0  2016-08-11 21:58:05

如果这正是您的样式在样式表中的放置方式（很难说清楚而没有看到实际的出处），那么我相信您的问题不是iPad样式没有加载-而是它们以错误的顺序加载。

您应该从最小（顶部）到最大（底部）布置样式 （即320然后480然后768等）。 否则，较小的屏幕样式可能会覆盖较大的屏幕样式。

例如，如果我这样做： 

@media (max-width: 1024px) {
    .box { background: red; }
}

@media (min-width: 420px) {
    .box { background: yellow; }
}

在420像素到1024像素之间的任何屏幕上， background颜色均为黄色。

因此，您需要将顺序从较小的顺序切换为较大的顺序，或者可以通过媒体查询获得更具体的顺序。 例： 

@media (min-width: 768px) and (max-width: 1024px) {
    .box { background: red }
}

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 我的响应式媒体查询在 CSS 代码中不起作用？ 为什么CSS3媒体查询不起作用？ 为什么我的@media 查询不适用于图片标签？ 媒体查询在我的情况下不起作用 为什么我的@media查询不起作用？ 我的媒体查询在CSS中不起作用，似乎无法识别 为什么我的媒体屏幕查询不起作用，为什么我的网站无法响应？ CSS媒体查询img max-width不起作用 CSS @media查询不适用于元标记 媒体查询不起作用
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM