css - 媒体查询无法正常工作(平板电脑大小有效，移动设备无效)

Question

我的媒体查询无法正常工作，从台式机到平板电脑它工作正常，但它不会改变从平板电脑到移动设备(尤其是 H1)的大小。

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    text-align: center;
}

section {
    min-height: 85%
}

a {
    text-decoration: none;
}

li {
    list-style-type: none;
}

h1, h2, h3, a {
    font-family: "Roboto Slab", sans-serif;
    font-weight: 500;
    color: #494949;
    text-transform: uppercase;
}

h1, h2 {
    color: white;
    text-shadow: 0 -1px #999999, 1px 0 #999999, 0 1px #999999, -1px 0 #999999;
}

h3 {
    font-size: 40px;
    padding-top: 0%;
    margin-bottom: 5px;
}

h4, p {
    font-family: "Roboto Slab", serif;
    color: #494949;
}

/* h1 padding as solution for the "jump to home" problem :h1 {padding-top: 2.5%} *******/

hr {
    width: 100px;
    height: 3px;
    background: #494949;
    border: 0;
    margin: 0 auto 40px auto;
}

#logo, li, img, .button {
    transition: all 300ms;
    -webkit-transition: all 300ms;
    -moz-transition: all 300ms;
    -o-transition: all 300ms
}

/* HEADER ********************************/

header {
    width: 100%;
    height: 65px;
    position: fixed;
    top: 0;
    left: 0;
    background: #FEFCFB;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    z-index: 1;
}

#logo {
    width: 140px;
    float: left;
    margin: 10px 0 0 -10px
}

#logo img {
    width: 56%;
}

#logo:hover {
    opacity: 0.5;
}

header nav {
    float: right;
    margin: 6px 50px 0 0;
}

header nav ul li {
    float: left;
    margin-left: 25px;
}

header nav ul li a {
    font-size: 16px
}

header nav ul li:hover {
    padding-top: 5px;
}

/* Header

#headerino {
	min-height: 10%
}
 ********************************/

/* Home ********************************/

#home {
    background: url(../img/landing.jpg);
    background-position: center center;
    background-size: cover;
    background-attachment: fixed;
}

#home h1 {
    margin: 0 0 0 0;
    padding: 70px;
    font-size: 110px
}

#home h2 {
    margin: 0 auto 0 auto;
    font-size: 25px;
}

#home img {
    width: 32px;
    margin-top: 150px;
    opacity: 0.7;
}

#home img:hover {
    opacity: 1;
}

#home {
    min-height: 100%
}

/* About ********************************/

#about img {
    width: 240px;
}

#about h4 {
    font-size: 15px;
}

#about p {
    width: 70%;
    margin: 0 auto 0 auto;
}

#about img:hover {
    transform: scale(1.1);
}

/* Kurzwarenmobil ********************************/

#DasKurzwarenmobil img {
    width: 400px;
    border-radius: 3px;
}

#DasKurzwarenmobil {
    background-color: #D3D3D3;
    opacity: 1;
}

#DasKurzwarenmobil p {
    width: 70%;
    margin: 0 auto 0 auto;
}

#DasKurzwarenmobil img:hover {
    transform: scale(1.1);
}

/* Ich bringe den Großhandel zu ihnen ********************************/

#Großhandel img {
    width: 400px;
    border-radius: 3px;
}

#Großhandel img:hover {
    transform: scale(1.1);
}

#Großhandel p {
    width: 70%;
    margin: 0 auto 0 auto;
}

/* Service ********************************/

#service img {
    width: 400px;
    border-radius: 3px;
}

#service {
    background-color: #D3D3D3;
    opacity: 1;
}

#service img:hover {
    transform: scale(1.1);
}

#service p {
    width: 70%;
    margin: 0 auto 0 auto;
}

/* Contact  ********************************/

form input, textarea {
    font-family: "Roboto Slab", serif;
    font-size: 15px;
    margin-bottom: 10px;
    border-radius: 10px;
    border: 2px solid;
    border-color: #494949;
    outline: none;
}

form input {
    width: 552px;
    height: 30px
}

form textarea {
    width: 552px;
    height: 200px;
    resize: none;
    border-color: #494949;
}

.input_text {
    color: #494949;
    padding-left: 10px;
}

.button {
    width: 566px;
    height: 50px;
    background-color: #f0f0f0;
    color: #494949;
}

.button:hover {
    background-color: #494949;
    color: #f0f0f0;
}

/* Footer  ********************************/

footer {
    width: 100%;
    height: 70px;
    background-color: #3f3f3f;
}

footer p {
    font-size: 12px;
    color: #f0f0f0;
    padding-top: 30px;
}

/* Media Queries ********************************/

/* Tablets ********************************/

@media screen and (max-width:1024px) {
    #logo {
        width: 100px;
        margin-top: 5px;
    }
    header nav {
        margin-top: 10px;
    }
    header nav ul li {
        font-size: 12px;
    }
    #home h1 {
        font-size: 65px;
    }
    #home h2 {
        font-size: 22px;
    }
    h3 {
        padding-top: 12%
    }
}

/* Mobile********************************/

@media screen and (max-width:480px) {
    #logo {
        width: 100px;
        margin-top: 5px;
    }
    header nav {
        margin-top: 10px;
    }
    header nav ul li {
        font-size: 12px;
    }
    #home h1 {
        font-size: 30px;
    }
    #home h2 {
        font-size: 22px;
    }
    h3 {
        padding-top: 12%
    }
}

<link rel="stylesheet" type="text/css" href="css/fontawesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Roboto:500" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto+Slab" rel="stylesheet">
<!-- Header -->
<header>
  <div id="logo">
    <img src="img/111.jpg"="Kurzwarenmobil">
  </div>
  <nav>
    <ul>
      <a href="#index">
        <li>home</li>
      </a>
      <a href="#about">
        <li>Über mich</li>
      </a>
      <a href="#DasKurzwarenmobil">
        <li>Das Kurzwarenmobil</li>
      </a>
      <a href="#Kontakt">
        <li>Kontakt</li>
      </a>
    </ul>
  </nav>
</header>
<!-- Home -->
<section id="home">
  <h1>Kurzwarenmobil</h1>
  <h2>H.S. Schneiderbedarf</h2>
  <a href="#about">
    <img src="img/pfeil.png" alt="arrow">
  </a>
</section>
<!-- Über mich -->
<section id="about">
  <h3>Über mich</h3>
  <hr>
  <img src="img/avatar.png" alt="Hüllis face">
  <h4>H.S Schneiderbedarf<h4>
      <p>
        Ich Bin Hülya S. und habe mittlerweile mehr als ein Jahrzent Erfahrung im Schneider- sowie Kurzwarengeschäft
        angesammelt.
        Meine Leidenschaft und Faszinierung der Branche gegenüber brachten mich
        nach jahrelangem arbeiten als Näherin in verschiedenen Unternehmen dazu, mich in dieser Branche selbstständig zu
        machen Nachdem die Entscheidung der Selbstständigkeit gefällt war, fing die Arbeit erst richtig an. Nach langem
        Konzeptionieren, Umsetzen, Verfeinern, Scheitern und wieder aufstehen war letzendlich die Idee des
        "Kurzwarenmobils" geboren.<br>Mittlerweile erstreckt sich mein Kundenstamm weit über die Grenzen Hannovers, den Heimatort des Kurzwarenmobils
        aus. Mittlerweile beläuft sich das Geschäft auf viele große sowie kleine Städte Norddeutschlands, und die
        Kapazitätsgrenze ist noch lange nicht erreicht.
      </p>
</section>
<!-- Kurzwarenmobil -->
<section id="DasKurzwarenmobil">
  <br>
  <h3>Das Kurzwarenmobil</h3>
  <hr>
  <img src="img/333.jpg" alt="INSERT IMG Hülli WAGEN+ Sie">
  <h4>Was Ist das Kurzwarenmobil?</h4>
  <p>
    Das Kurzwarenmobil ist mein Transporter, mit dem ich täglich verschiedene Städte Deutschlands besuche und meinen
    über 300 Kunden, die
    benötigten Utensilien und Stoffe direkt zu ihren Läden liefere.
  </p>
  <br>
  <br>
</section>
<br>
<!-- großhandel--->
<section id="Großhandel">
  <h4>Ich bringe den Großhandel zu ihnen</h4>
  <img src="img/4444.jpg" alt="Großhandel">
  <br>
  <br>
  <p>
    Da das Hauptgeschäft des Kurzwarenmobils auf die Mobilität und große Auswahl ausgelegt ist und ich die Waren direkt
    vom Großhandel beziehe,
    bin ich in der Lage die beste Ware zum günstigen Preis anzubieten. wodurch sie selbstverständlich bares Geld sparen
    können!<br>Umfangreiches Angebot und stets die aktuellsten Waren der Kurzwarenwelt, Ob Knöpfe und
    Reißverschlüsse für individuelle Modeschöpfungen, Handarbeitsgarne oder modische
    Bänder und Kordeln für kreative Deko-Ideen: Das Kurzwarenmobil führt stehts eine Große Auswahl an hochwertigen
    Arbeitsmaterialien und das ohne Einschränkung und in voller Ausführung direkt vor ihrer Tür!
    Durch regelmäßige Besuche und kostenloser Anfahrt können sie dadurch Einsparungen in ihren Lagerhaltungs- bzw
    Lieferungskosten einsparen.
  </p>
</section>
<!-- individueller service-->
<section id="service">
  <br>
  <h4>Individueller Service</h4>
  <img src="img/222.jpg" alt="Sortiment innen">
  <br>
  <br>
  <p>
    Durch die Natur meiner Arbeit haben sie nicht nur den Vorteil, dass ich ihnen alle benötigten Utensilien bis vor die
    Türe bringe, sondern auch das Privileg sich am gesamten Katalog des Kurzwarenmobils vor Ort inspirieren und
    individuell beraten zu lassen. Fehlerhafte Bestellung gehören damit der vergangenheit an!
  </p>
  <br>
</section>
<!-- Contact -->
<section id="Kontakt">
  <h3>Kontakt</h3>
  <hr>
  <form>
    <input class="input_text" type="email" tabindex="1" Placeholder="E-mail"><br><br>
    <input class="input_text" type="text" tabindex="2" Placeholder="Betreff"><br><br>
    <textarea class="input_text" tabindex="3" Placeholder="Nachricht"></textarea> <br><br>
    <input class="button" type="submit">
  </form>
</section>
<!-- Footer -->
<footer>
  <p>
    &copy; 2018-2019 B.Ertürk, All rights reserved
  </p>
</footer>

我的媒体查询无法正常工作，从台式机到平板电脑它工作正常，但它不会改变从平板电脑到移动设备(尤其是 H1)的大小。

html, body{margin: 0; padding: 0; height: 100%; text-align: center;}
section { min-height: 85%}
a {text-decoration: none;}
li {list-style-type: none;}

h1, h2, h3,a { font-family: "Roboto Slab", sans-serif ; font-weight: 500; color: #494949;text-transform: uppercase;}
h1, h2 {color: white;
text-shadow: 0 -1px #999999, 1px 0 #999999, 0 1px #999999, -1px 0 #999999;}
h3 {font-size: 40px; padding-top: 0%;margin-bottom: 5px;}
h4, p {font-family: "Roboto Slab", serif; color:#494949;}

/* h1 padding as solution for the "jump to home" problem :h1 {padding-top: 2.5%} *******/


hr {width: 100px;height: 3px;background: #494949;border: 0;margin: 0 auto 40px auto;}
#logo,li,img,.button {transition: all 300ms; -webkit-transition: all 300ms; -moz-transition: all 300ms; -o-transition: all 300ms}


/* HEADER ********************************/
header { width: 100%; height: 65px; position: fixed; top:0;	left: 0; background: #FEFCFB; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) ; z-index: 1; }

	#logo {

	width: 140px;
	float: left;
	margin: 10px 0 0 -10px
	}

#logo img{

	width: 56%;


}

#logo:hover {
	opacity: 0.5;
}

	
header nav {

	float:right;
	margin:6px 50px 0 0;
}

header nav ul li {
	float:left;
	margin-left: 25px;
}

header nav ul li a {
	font-size: 16px
}

header nav ul li:hover {
	padding-top: 5px;
}
/* Header

#headerino {
	min-height: 10%
}
 ********************************/





/* Home ********************************/


#home{
	background: url(../img/landing.jpg);
	background-position: center center;
	background-size: cover;
	background-attachment:  fixed;
	}

#home h1 {
	margin: 0 0 0 0;
	padding: 70px;
	font-size: 110px}

#home h2 {
	margin: 0 auto 0 auto;
	font-size: 25px;

}

#home img  {
	width: 32px;
	margin-top: 150px;
	opacity: 0.7;
}
#home img:hover {
	opacity: 1;
}
#home {min-height: 100%}
/* About ********************************/


#about img {
	width: 240px;
}

#about h4{
	font-size: 15px;
}

#about p{
	width: 70%;
	margin:0 auto 0 auto;


}

#about img:hover {
	transform: scale(1.1);
}


/* Kurzwarenmobil ********************************/

#DasKurzwarenmobil img {
	width: 400px;
	border-radius: 3px;


}
#DasKurzwarenmobil {
	background-color: #D3D3D3;
	opacity: 1;
}
#DasKurzwarenmobil p{
	width: 70%;
	margin:0 auto 0 auto;
	}

#DasKurzwarenmobil img:hover {
	transform: scale(1.1);
}



/* Ich bringe den Großhandel zu ihnen ********************************/
#Großhandel img {
	width: 400px;
	border-radius: 3px;}

	#Großhandel img:hover {
	transform: scale(1.1);
}

#Großhandel p{
	width: 70%;
	margin:0 auto 0 auto;
}
/* Service ********************************/
#service img {
	width: 400px;
	border-radius: 3px;
}

#service {
	background-color: #D3D3D3;
	opacity: 1;
}
#service img:hover {
	transform: scale(1.1);}

#service p{
	width: 70%;
	margin:0 auto 0 auto;
	}

/* Contact  ********************************/


form input, textarea {
font-family: "Roboto Slab", serif;
font-size: 15px;
margin-bottom: 10px;
border-radius: 10px;
border: 2px solid;
border-color: #494949;
outline: none;
}

form input {

	width: 552px;
	height: 30px

}

form textarea {
	width: 552px;
	height: 200px;
	resize: none;
	border-color: #494949;
}


.input_text {
	color:#494949 ;
	padding-left: 10px;
}

.button {

	width: 566px;
	height: 50px;
	background-color: #f0f0f0;
	color: #494949;
}

.button:hover {

	background-color: #494949;
	color: #f0f0f0;

}

/* Footer  ********************************/


footer {

width: 100%;
height: 70px;
background-color: #3f3f3f;
}

footer p {
	font-size: 12px;
	color: #f0f0f0;
	padding-top:30px;
}

/* Media Queries ********************************/






/* Tablets ********************************/

@media screen and (max-width:1024px){



#logo {
	width: 100px;
	margin-top: 5px;
}


header nav {
	margin-top: 10px;

}
header nav ul li {
	font-size: 12px;
}

#home h1 {
	font-size: 65px;
	

}

#home h2 {
	font-size: 22px;
}
h3 {padding-top: 12%
}

}
/* Mobile********************************/

@media screen and (max-width:480px) {

#logo {
	width: 100px;
	margin-top: 5px;
}


header nav {
	margin-top: 10px;

}
header nav ul li {
	font-size: 12px;
}

#home h1 {
	font-size: 30px;
	

}

#home h2 {
	font-size: 22px;
}
h3 {padding-top: 12%
}

}

 	<link rel="stylesheet" type="text/css" href="css/fontawesome.min.css">
 	<link href="https://fonts.googleapis.com/css?family=Roboto:500" rel="stylesheet"> 
 	<link href="https://fonts.googleapis.com/css?family=Roboto+Slab" rel="stylesheet"> 
	<!-- Header -->
  	<header>
 
  		<div id="logo">
 			<img src="img/111.jpg"="Kurzwarenmobil">
  		</div>

  		<nav>
  		
  			<ul>
  				<a href="#index"><li>home</li></a>
  				<a href="#about"><li>Über mich</li></a>
  				<a href="#DasKurzwarenmobil"><li>Das Kurzwarenmobil</li></a>
  				<a href="#Kontakt"><li>Kontakt</li></a>
  			</ul>
  		</nav>
  	</header>


  	<!-- Home -->
<section id="home">
  			<h1>Kurzwarenmobil</h1>
  			<h2>H.S. Schneiderbedarf</h2>
  			<a href="#about">
  			<img src="img/pfeil.png" alt="arrow">
  			</a>
</section>


  	 <!-- Über mich -->

<section id="about">
 			<h3>Über mich</h3>
 			<hr>
 			<img src="img/avatar.png" alt="Hüllis face">
 			<h4>H.S Schneiderbedarf<h4>
 			<p> 
 				Ich Bin Hülya S. und habe mittlerweile mehr als ein Jahrzent Erfahrung im Schneider- sowie Kurzwarengeschäft angesammelt. 
				Meine Leidenschaft und Faszinierung der Branche gegenüber brachten mich
				nach jahrelangem arbeiten als Näherin in verschiedenen Unternehmen dazu, mich in dieser Branche selbstständig zu machen
				
				Nachdem die Entscheidung der Selbstständigkeit gefällt war, fing die Arbeit erst richtig an. Nach langem Konzeptionieren, Umsetzen, Verfeinern, Scheitern und wieder aufstehen war letzendlich die Idee des "Kurzwarenmobils" geboren.
				<br>

				Mittlerweile erstreckt sich mein Kundenstamm weit über die Grenzen Hannovers, den Heimatort des Kurzwarenmobils aus. Mittlerweile beläuft sich das Geschäft auf viele große sowie kleine Städte Norddeutschlands, und die Kapazitätsgrenze ist noch lange nicht erreicht.
			
			</p>
</section>


 		<!-- Kurzwarenmobil -->

<section id="DasKurzwarenmobil">
 			<br>
 			<h3>Das Kurzwarenmobil</h3>
 			<hr>
 			<img src="img/333.jpg" alt="INSERT IMG Hülli WAGEN+ Sie">
 			<h4>Was Ist das Kurzwarenmobil?</h4>
 			<p>
 				Das Kurzwarenmobil ist mein Transporter, mit dem ich täglich verschiedene Städte  Deutschlands besuche und meinen über 300 Kunden, die
				benötigten Utensilien und Stoffe direkt zu ihren Läden liefere.

			
 			</p>
 			<br>
 			<br>
</section>
			
			<br>


		<!-- großhandel--->
<section id="Großhandel">

	<h4>Ich bringe den Großhandel zu ihnen</h4>

	<img src="img/4444.jpg" alt="Großhandel">
	<br>
	<br>

	<p>

	Da das Hauptgeschäft des Kurzwarenmobils auf die Mobilität und große Auswahl ausgelegt ist  und ich die Waren direkt vom Großhandel beziehe,
	bin ich in der Lage die beste Ware zum günstigen Preis anzubieten. wodurch sie selbstverständlich bares Geld sparen können!
	<br>
	Umfangreiches Angebot und stets die aktuellsten Waren der Kurzwarenwelt, Ob Knöpfe und 
	Reißverschlüsse für individuelle Modeschöpfungen, Handarbeitsgarne oder modische
	Bänder und Kordeln für kreative Deko-Ideen: Das Kurzwarenmobil führt stehts eine Große Auswahl an hochwertigen
	Arbeitsmaterialien und das ohne Einschränkung und in voller Ausführung direkt vor ihrer Tür! 
	Durch regelmäßige Besuche und kostenloser Anfahrt können sie dadurch Einsparungen in ihren Lagerhaltungs- bzw Lieferungskosten einsparen.

	</p>

</section>


		<!-- individueller service-->

<section id="service">
	<br>


	<h4>Individueller Service</h4>

	<img src="img/222.jpg" alt="Sortiment innen">
	<br>
	<br>


	<p>

	Durch die Natur meiner Arbeit haben sie nicht nur den Vorteil, dass ich ihnen alle benötigten Utensilien bis vor die Türe bringe, sondern auch das Privileg sich am gesamten Katalog des Kurzwarenmobils vor Ort inspirieren und individuell beraten zu lassen. Fehlerhafte Bestellung gehören damit der vergangenheit an!
	
	

	</p>
	<br>
 			
</section>

		 	<!-- Contact -->

<section id="Kontakt">
			<h3>Kontakt</h3>
			<hr>

			<form>
			<input class="input_text" type="email" tabindex="1" Placeholder="E-mail" ><br><br>
			<input class="input_text" type="text" tabindex="2" Placeholder="Betreff" ><br><br>
		    <textarea class="input_text" tabindex="3" Placeholder="Nachricht" ></textarea> <br><br>
		    	<input class="button" type="submit">

			</form>
</section>

		 	<!-- Footer -->

		<footer>
			<p>
				&copy; 2018-2019 B.Ertürk, All rights reserved
			</p>
		</footer>

Answer 1

You can use media query like this.

@media (max-width:767px) {
    /** Style goes here **/

}

@media (min-width:768px) and (max-width:991px) {
    /** Style Style goes here **/
}


@media (min-width:992px) and (max-width:1199px) {
    /** Style Style goes here **/
}

or use media Query according to your need