由于某些原因，我的h1和h4字体大小不随媒体查询而改变。其他所有（p，img，ul和li等）。
<h1 class="text_t">
My Name
</h1>
<hr>
<div class="text_c" style="text-align:center">
<h4>Title</h4>
<div class="row">
<div class="col-md-5 col-sm-5 col-xs-12"><img src="files/2.jpg"></div>
<div class="col-md-7 col-sm-7 col-xs-12">
<h1>Details</h1>
<ul>
<li><strong>Name</strong>: My name Wongsajjathiti</li>
<li><strong>Age</strong>: My age</li>
<li><strong>Education</strong>: My Edu</li>
<li><strong>Nationality</strong>: My nat</li>
</ul>
</div>
</div>
</div>
这是我的媒体查询：
/*
* Author: http://stuffandnonsense.co.uk/blog/about/hardboiled_css3_media_queries/
*/
/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px) and (max-device-width : 480px) {
h1 {font-size: 1em}
h4 {font-size:0.7em;}
p {font-size: 0.3em;}
}
/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px) {
/* Styles */
h1 {font-size: 1em}
h4 {font-size:0.7em;}
p {font-size: 0.3em;}
}
@media only screen and (max-width: 700px) {
h1 {font-size: 1em; }
h4 {font-size:1em}
p {font-size: 1em}
.intro li {font-size: 1em;}
}
/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
h1 {font-size: 2em}
h4 {font-size:1em}
p {font-size: 1em}
.intro li {font-size: 1em;}
}
@media only screen and (min-device-width : 768px) and (max-device-width : 1224px) {
h1 {font-size: 2em}
h4 {font-size:1em}
p {font-size: 1em}
.intro li {font-size: 1em;}
}
/* iPads (landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
h1 {font-size: 2em}
h4 {font-size:1em}
p {font-size: 1em}
.intro li {font-size: 1em;}}
.icon {margin-top: -30px;}
/* iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
h1 {font-size: 2em}
h4 {font-size:1em}
p {font-size: 1em}
.intro li {font-size: 1em;}
.icon {margin-top: 100px;}
/* Styles */
}
@media only screen and (min-width : 724px) and (max-width: 1260px){
h1 {font-size:5em}
h4 {font-size:1em}
p {font-size: 1em}
.intro li {font-size: 1em;}
.icon {margin-top: 90px;}
}
/* Desktops and laptops ----------- */
@media only screen and (min-width : 1224px) {
.icon {margin-top: 300px;}
p {font-size: 5em;}
}
/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
/* Styles *//* Styles */
}
/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}
当我改变桌面浏览器的大小时，其他所有内容都会相应调整，但不是所有的都重新调整。此外，出于某种原因，我无法使用h1 {font-family（例如）}更改我的h1的css属性，但仅使用.text_t {font-family}。
发生了什么事？请帮忙。
谢谢
答案 0 :(得分：3)
我认为你最好简化你的@media查询：
https://jsfiddle.net/sheriffderek/4s76bf8t/
h1 {
font-size: 1rem;
}
@media (min-width: 400px) {
h1 {
font-size: 1.3rem;
}
}
@media (min-width: 600px) {
h1 {
font-size: 1.6rem;
}
}
@media (min-width: 800px) {
h1 {
font-size: 1.9rem;
}
}
@media (min-width: 1000px) {
h1 {
font-size: 2.2rem;
}
}
希望这有助于表明规则重叠很多地方。