Только две точки прерывания медиа-запросов в моей работе css. Почему остальные не работают?
Мой вопрос в том, почему в моем 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;
}
}
Если это именно то, как ваши стили лежат в вашей таблице стилей (трудно сказать, не видя фактического источника), то я считаю, что ваша проблема НЕ в том, что стили 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 }
}
