媒体查询无法正常工作（平板电脑尺寸正常，移动设备无效）
我无法使媒体查询正常运行，从台式机到平板电脑都可以正常工作，但是无法将平板电脑到移动设备（尤其是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>
© 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>
© 2018-2019 B.Ertürk, All rights reserved
</p>
</footer>
2 个答案:
答案 0 :(得分：0)
您可以像这样使用媒体查询。
@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 **/
}
或根据您的需要使用媒体查询
答案 1 :(得分：0)
您对导航和h1（以及所有其他元素）的查询工作正常。
480px并不意味着手机，如今它仅适用于旧的智能手机（例如iphone 4？）
如果您使用的是较新的手机（例如过去4-5年的手机），则该手机很可能没有480像素的屏幕，因此您看不到任何较小的标题。
您应该考虑为当前的智能手机添加另一个介于1024像素和480像素之间的断点。
编辑：为您显示代码有效：
我将代码中h1的字体大小设置为10px（并出于演示目的添加了一些边距）
@media screen and (max-width:480px) {
[...]
#home h1 {
font-size: 10px;
margin-top: 120px;
}
[...]
}
然后，如果您运行代码，请检查结果中的iframe并将其宽度设置为300px（或任何小于480px的宽度）
然后您将得到如下结果：
这是开发工具中的视图：
我没有更改代码中的其他任何内容，因此您可以看到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: 50%;
box-sizing: border-box;
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 {
margin-top: 120px;
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: 10px;
margin-top: 120px;
}
#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>
© 2018-2019 B.Ertürk, All rights reserved
</p>
</footer>
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？