Question

我正在开发一个模板，我在其中应用了768px到1024px的媒体查询，并将其包含在我的html文件中，并应用了另一组媒体查询，范围为425px到750像素，并将其包含在html文件中。但是应用于范围728px-1024px的样式适用于两个范围。

＆＃13;

/* 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 */
}

＆＃13;

<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">

＆＃13;

Answer 1

在上面的问题中，两个媒体查询都包含相同的屏幕尺寸。如果仍然无法正常工作，请尝试以下方式。

您应用于425px到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">

相同的样式应用于不同的媒体查询

2 个答案: