Responsiv in HTML
Sep 04, 2024 pm 04:46 PM
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!
Hei?e KI -Werkzeuge
Undress AI Tool
Ausziehbilder kostenlos
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Clothoff.io
KI-Kleiderentferner
Video Face Swap
Tauschen Sie Gesichter in jedem Video mühelos mit unserem v?llig kostenlosen KI-Gesichtstausch-Tool aus!
Hei?er Artikel
Hei?e Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Warum wird mein Bild nicht in HTML angezeigt?
Jul 28, 2025 am 02:08 AM
Das nicht angezeigte Bild wird normalerweise durch einen falschen Dateipfad, einen falschen Dateinamen oder eine falsche Erweiterung, HTML -Syntaxprobleme oder einen Browser -Cache verursacht. 1. Stellen Sie sicher, dass der SRC -Pfad mit dem tats?chlichen Speicherort der Datei übereinstimmt, und verwenden Sie den richtigen relativen Pfad. 2. überprüfen Sie, ob der Fall und die Erweiterung des Dateinamens genau übereinstimmen, und überprüfen Sie, ob das Bild durch direktes Eingeben der URL geladen werden kann. 3. überprüfen Sie, ob die IMG -Tag -Syntax korrekt ist. Stellen Sie sicher, dass es keine redundanten Zeichen gibt und der Alt -Attributwert angemessen ist. 4. Versuchen Sie, die Seite zu aktualisieren, den Cache zu l?schen oder den Inkognito -Modus zu verwenden, um Cache -Interferenzen zu beseitigen. Fehlerbehebung in dieser Reihenfolge kann die meisten Probleme mit HTML -Bildanzeigen l?sen.
K?nnen Sie ein -Tag in ein anderes -Tag einfügen?
Jul 27, 2025 am 04:15 AM
?youcannotnestTagsinsideanotagbecauses's'sinvalidhtml; browsersauutomatisch -closethefirstbeerextenext, resultierendinseparateparagraphs.?instead, useInLineElements, oder
Wie erstelle ich eine ungeordnete Liste in HTML?
Jul 30, 2025 am 04:50 AM
Um eine nicht ordnungsgem??e HTML -Liste zu erstellen, müssen Sie ein Tag verwenden, um einen Listencontainer zu definieren. Jedes Listenelement ist mit einem Tag verpackt, und der Browser fügt automatisch Kugeln hinzu. 1. Erstellen Sie eine Liste mit einem Tag; 2. Jedes Listenelement ist mit einem Tag definiert. 3. Der Browser generiert automatisch Standard -Punkt -Symbole. 4. Unterverschiedene k?nnen durch Verschachtelung implementiert werden. 5. Verwenden Sie das Attribut vom Typ Listenstil von CSS, um den Symbolstil wie Scheibe, Kreis, Quadrat oder keine zu ?ndern. Verwenden Sie diese Tags korrekt, um eine nicht ordnungsgem??e Standardliste zu generieren.
Wie benutze ich das inhaltliche Attribut?
Jul 28, 2025 am 02:24 AM
TheContententitableAttributemakesAnyhtmlelementedableByAddingCentabled = "true", und das Erlaubnis für die Erlaubnis, dass es, dass in der Lage ist
Die Bedeutung der semantischen HTML für SEO und Barrierefreiheit
Jul 30, 2025 am 05:05 AM
SemantichtmlimprovesbothseoandAccessibilityByuseing -meaningfulTagSthatConveyContentStructure.1) iTenhancesseothroughbetterContentHierarchyWithProperHeadinglevels, verbesserteIndexingviaelementSlikaND und -SupportforrichsnippetsususingStrostStrostStrostStrostStrostStrostStrostaustaustaustrota.2)
Definieren von benutzerdefinierten Vokabeln mit HTML5 Schema.org Markup.
Jul 31, 2025 am 10:50 AM
Das Schema.org -Tag hilft Suchmaschinen, das strukturierte Datenformat von Webseiteninhalten über semantische Tags (z. B. Elementumfang, Elementtyp, ElementProp) zu verstehen. Es kann verwendet werden, um benutzerdefiniertes Vokabular zu definieren. Zu den Methoden geh?ren die Erweiterung vorhandener Typen oder die Einführung neuer Typen mithilfe von zus?tzlichem Typ. In den tats?chlichen Anwendungen sind die Struktur klar, priorisieren Sie die Verwendung offizieller Attribute, die Gültigkeit des Codes und stellen sicher, dass benutzerdefinierte Typen zug?nglich sind. Zu den Vorsichtsma?nahmen geh?ren das Akzeptieren der teilweisen Unterstützung, die Vermeidung von Rechtschreibfehlern und die Auswahl eines geeigneten Formats wie JSON-LD.
So erstellen Sie ein Sucheingangsfeld in einem HTML -Formular
Aug 02, 2025 pm 04:44 PM
UsTheelementWitHinatagTocreateEmanticSearchfield.2.IncludeaForAccessibility, settheform'Saction undMethod = "AttributestosendDatoAsearchendPointWithasharableUrl.
Was ist der Zweck des REL -Attributs in einem Link -Tag in HTML?
Aug 03, 2025 pm 04:50 PM
rel = "styleSheet" linkScssFilesforstylingThePage; 2.rel = "vorlad" HintStopreloadcriticalResourcesForperformance; 3.rel = "icon" setStheWebsit'sfavicon;
