Heim >Web-Frontend >HTML-Tutorial >Responsiv in HTML
Responsiv in HTML
- WBOYOriginal
- 2024-09-04 16:46:49587Durchsuche
Responsive Design in HTML ist das Konzept, das das HTML-Element entsprechend der Gerätegröße für jede Bildschirmgröße anpasst. Diese Elemente sollten auf jedem Gerät wie Mobilgeräten, Desktops oder Tablets perfekt aussehen. Beim Responsive Design werden Elemente schnell an den verfügbaren Platz in der Anzeigeansicht angepasst. Es basiert auf Dingen wie der Breite des Ansichtsfensters, der Textgröße, dem responsiven Bild und anderen Elementen. Heutzutage gibt es viele neue Techniken im responsiven Design, um das Design für verschiedene Browser und Geräte perfekt zu gestalten. Medienabfragen sind einer der besten Aspekte, auch im responsiven Design durch CSS, das den Browser anweist, sich an die Gerätegröße des Benutzers anzupassen.
Syntax, die im HTML Responsive Design verwendet wird
Responsives Design in HTML hängt von so vielen Faktoren ab; Schauen wir sie uns einzeln an:
1. Ansichtsfenster einstellen: Die folgende Syntax wird verwendet, um das Ansichtsfenster auf die Benutzerseitenansicht einzustellen, was dem Browser hilft, die Abmessungen der Webseite und deren Skalierung zu steuern. Es passt die Elemente automatisch an unterschiedliche Gerätegrößen und Anzeigebildschirme an.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
2. Responsive Bilder: Wenn Sie einige Bilder zu unserer Webseite hinzufügen, ist es auch notwendig, diese Bilder in der richtigen Größe auf dem Bildschirm jedes Geräts anzuzeigen.
<div class='section content'> <img class='example' src='images/example.svg' /></div>
3. Legen Sie die Breiteneigenschaft fest: Mit Hilfe von CSS können wir die Breite auf 100 % festlegen, sodass das Element in der Bildschirmanzeige reaktionsfähig wird.
width: 100%;
4. Mit der Eigenschaft „Maximale Breite“: Genau wie bei der Breite kann man die maximale Breite des Elements auf 100 % festlegen, damit wir alle unsere HTML-Elemente im richtigen Reaktionsformat anzeigen können.
Max-width:100%;
5. Responsiver Text: Wie bei einem anderen Element ist es notwendig, den Text auch auf allen Geräten entsprechend ihrer Bildschirmgröße verantwortlich zu machen. Es kann mit VW eingestellt werden, was dem Benutzer hilft, die Breite des Ansichtsfensters einzustellen, um die Textgröße einfach an den Gerätebildschirm anzupassen. Diese Syntax erklärt, dass das Ansichtsfenster als Browser-Anzeigegröße bezeichnet wird. Hier entspricht 1 VW den tatsächlichen 1 % der Breite des Ansichtsfensters.
<h4 style="font-size:5vw">Text</h4>
6. Verwenden von Medien Abfragen: Medienabfragen spielen eine wichtige Rolle beim responsiven Design, um Text, Bilder und andere Elemente für verschiedene Gerätegrößen und Browsergrößen reaktionsfähiger zu machen. Heutzutage stehen verschiedene Frameworks zur Verfügung, um unsere Webseite reaktionsfähiger zu machen. Sie sind wie:
- Responsive Stylesheet: Dieses Framework hilft uns, verschiedene Stylesheet-Frameworks wie W3.CSS zu verwenden, das die Hauptrolle bei der Erstellung eines responsiven Designs spielt. Standardmäßig wird das Mobile-First-Design unterstützt. Es ist leicht zu erlernen und zu entwickeln.
- Bootstrap: Es ist das beliebteste Framework, das schnell wächst und dem Benutzer kostenlos zur Verfügung steht. Es ist benutzerfreundlicher als andere Frameworks, da es auf Webentwicklungssprachen wie HTML, CSS und JQuery basiert, was dazu beiträgt, dass Webseiten reaktionsfähiger werden.
- Neuestes Responsive CSS: Es unterstützt verschiedene Arten von Browsern sowie alle Arten von Geräten wie Smartphones, Tablets, Laptops usw.
Beispiele für die Implementierung von Responsive in HTML
Unten finden Sie Beispiele für Responsive in HTML.
Beispiel #1
In diesem Beispiel legen wir den Ansichtsbereich im HTML-Code fest und machen das Bild auch responsiv.
HTML-Code:
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <body> <h2>Responsive Design by setting Viewport</h2> <p>Setting specific width to the screen which will adjust screen as per device on which we are going to display our webpage.</p> <img src="images.jpg" > </body>
Ausgabe auf Desktop- oder Laptop-Bildschirm:
Ausgabe auf Mobilgeräten:
Ausgabe auf Tablet:
Beispiel #2
In Beispiel 2 machen wir den Bildschirm mithilfe von Medienabfragen reaktionsfähig. Dies wird uns helfen, Webseiten responsiv zu gestalten, indem wir verschiedene Browser und auch auf verschiedenen Geräten unterstützen, indem wir den Code verwenden:
HTML-Code:
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
box-sizing:border-box;
}
.top {
background-color:#00ff00;
padding:20px;
float:left;
width:30%;
}
.middle {
background-color:#800000;
padding:20px;
float:left;
width:40%;
color:white;
}
.bottom {
background-color:#00ffff;
padding:20px;
float:right;
width:30%;
}
@media screen and (max-width:800px) {
.top, .middle, .bottom {
width:100%;
}
}
</style>
</head>
<body>
<h2>Responsive Design in HTML using Media Queries</h2>
<p>We will see web page on different devices by resizing browser window</p>
<div class="top">
<h4>First Content Part</h4>
<img src="images.jpg">
</div>
<div class="middle">
<h4>Second Content Part</h4>
<img src="images.jpg">
</div>
<div class="bottom">
<h4>Third Content part</h4>
<img src="images.jpg">
</div>
</body>
Ausgabe in der Desktop-Ansicht:
Ausgabe auf mobilen Geräten: Auf dem mobilen Gerät ist der Ausgabebildschirm scrollbar. Um die gesamte Webseite zu sehen, müssen wir auf dem Bildschirm nach unten scrollen.
Ausgabe auf Tablet-Gerät: Die gleiche Ausgabe wird als „Pro Tablet-Gerätegröße“ angepasst.
Beispiel #3
Sehen wir uns ein weiteres Beispiel 3 mit Bootstrap, Standard-CSS und Medienabfragen an:
HTML-Code:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
box-sizing: border-box;
}
.options {
float:left;
width:20%;
text-align:center;
}
.options a {
background-color:#e5e5e5;
padding:8px;
margin-top:7px;
display:block;
width:100%;
color:black;
}
.main {
float:left;
width:60%;
padding:0 20px;
}
.course {
background-color:#ff8000;
color:white;
float:left;
width:20%;
padding:10px;
text-align:center;
}
#header
{
background-color:#003333;
padding:10px;
text-align:center;
color:white;
}
#footer{
background-color:black;
text-align:center;
padding:10px;
margin-top:7px;
color:white;
@media only screen and (max-width:620px) {
/* For mobile phones: */
.options, .main, .course {
width:100%;
}
}
}
</style>
</head>
<body>
<div id="header">
<h1>Welcome to EDUCBA</h1>
</div>
<div style="overflow:auto">
<div class="options">
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Career</a>
<a href="#">Contact us</a>
</div>
<div class="main">
<h2>WHO IS EDUCBA?</h2>
<p> Learn Graphic designing, Animation, Game Development, Video Editing & more with our Online Certification Courses</p>
</div>
<div class="course">
<h3><b>Courses</b></h3>
<p>Data science</p>
<p>Marketing</p>
<p>Excel</p>
<p>Design</p>
</div>
</div>
<div id="footer">© 2019 - EDUCBA. ALL RIGHTS RESERVED</div>
</body>
</html>
Output on Laptop Screen:
Output on Mobile Devices:
Output on Tablet:
Conclusion
Responsive design is done by using HTML and CSS language to make web page more responsive and user-friendly, which display properly on each and every device size. It uses the latest framework like W3.CSS, bootstrap and some media queries code.
Das obige ist der detaillierte Inhalt vonResponsiv in HTML. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!