Только две точки прерывания медиа-запросов в моей работе css. Почему остальные не работают?

103
15

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

<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;
}
}

спросил(а) 2016-08-12T00:41:00+03:00 4 года, 3 месяца назад
1
Решение
115

Если это именно то, как ваши стили лежат в вашей таблице стилей (трудно сказать, не видя фактического источника), то я считаю, что ваша проблема НЕ в том, что стили iPad не загружаются - это то, что они загружаются в неправильном порядке.

Вы должны выкладывать свои стили от самых маленьких (сверху) до наибольших (внизу) (т.е. 320, затем 480, затем 768 и т.д.). В противном случае ваши меньшие стили экрана, скорее всего, будут отменять ваши большие стили экрана.

Например, если я это сделаю:

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

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

Цвет background будет желтым на любом экране от 420 пикселей до 1024 пикселей.

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

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

ответил(а) 2016-08-12T00:58:00+03:00 4 года, 3 месяца назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема