相同樣式應用於不同的媒體查詢

Question

我正在使用一個模板，在該模板中，我對768px到1024px的范圍應用了媒體查詢，並將其包括在我的html文件中，並對425px到750 px的范圍應用了另一組媒體查詢，並將其包括在html文件中。 但是，將適用於728px-1024px范圍的樣式應用於兩個范圍。

 /* mediumdevice.css */ @media only screen and (min-width:768px) and (max-width:1024px) { /*some code */ } /* small.css */ @media only screen and (min-width:425px) and (max-width:750px) { /*some code */ } 

 <link rel="stylesheet" type="text/css" href="index.css"> <link rel="stylesheet" type="text/css" media="screen,projection" href="small.css"> <link rel="stylesheet" type="text/css" media="screen,projection" href="mediumdevice.css"> 

Answer 1

在上述問題中，兩個媒體查詢均包含相同的屏幕尺寸檢查。 如果仍然無法正常工作，請嘗試以下方法。

您為425像素至750像素屏幕申請的樣式具有!important屬性。

例如

/* small.css */
@media only screen and (min-width:425px) and (max-width:750px)
{
.paragraph
 {
   font-size : 20px !important
 }
}

Answer 2

更改css文件鏈接的順序。 應該將small.css放在mediumdevice.css之后

<link rel="stylesheet" type="text/css" href="index.css">
<link rel="stylesheet" type="text/css" media="screen,projection" href="mediumdevice.css">
<link rel="stylesheet" type="text/css" media="screen,projection" href="small.css">