Was müssen Sie über responsive Websites wissen?

Was ist eine responsive Website?

Wenn wir eine responsive Website auf einem beliebigen Gerät öffnen, wird der Inhalt jeder Webseite nicht überlaufen oder von anderen Webseiten verdeckt. Öffnen Sie beispielsweise die Website TutorialsPoint.com auf einem Gerät beliebiger Größe. Benutzer können beobachten, dass der Inhalt der Webseite gleich bleibt, die Ersetzung des Inhalts jedoch anders wird, sodass der Inhalt lesbar ist.

Das Grundprinzip einer responsiven Website besteht also darin, Inhalte auf jedem Gerät sichtbar und stilvoll darzustellen.

Warum brauchen wir eine responsive Website?

Die Frage ist nun, warum wir eine responsive Website benötigen sollten. Hier ist die Antwort.

Früher konnten Benutzer nur vom Desktop aus auf die Website zugreifen, aber jetzt können Benutzer von Geräten unterschiedlicher Größe, wie Mobil- und Tablet-Geräten, auf die Website zugreifen. Sogar der Großteil des Website-Verkehrs kommt von mobilen Geräten, nicht von Desktop-Geräten.

Heutzutage agiert jedes Unternehmen im Internet und versucht, über seine Website Kunden online zu gewinnen. Wenn ein Benutzer über ein mobiles Gerät auf Ihre Website zugreift und Ihre Website nicht über ein responsives Design verfügt, wird der Benutzer Ihre Website sofort schließen und zur Website eines Mitbewerbers wechseln.

Eine responsive Website ist also nützlich, um mehr Kunden und Besucher zu gewinnen.

Wie beginne ich mit der Erstellung einer responsiven Website?

Wir müssen gemeinsame Haltepunkte basierend auf den Abmessungen des Browsers verwenden und die HTML-Elemente entsprechend formatieren. Im Folgenden sind häufige Haltepunkte aufgeführt.

Mobile: 360 x 640 px
Tablet: 768 x 1024 px
Laptop: 1366 x 768 px
HDdesktop: 1920 x 1080 px

Als ersten Schritt müssen wir den folgenden Meta-Tag im Abschnitt hinzufügen.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Jetzt bleibt unser HTML-Inhalt derselbe wie die Webseite, aber wir müssen das CSS so schreiben, dass der HTML-Inhalt auf jedem Gerät problemlos gelesen werden kann.

Beispiel 1 (Elementabmessungen in Prozent festlegen)

Im folgenden Beispiel haben wir ein „Container“-Div-Element, das zwei „Col“-Div-Elemente enthält. Wir haben die Abmessungen des Container-Div-Elements in Prozent und die Abmessungen für das „Col“-Div-Element in Prozent festgelegt.

In der Ausgabe kann der Benutzer feststellen, dass sie auf Geräten jeder Größe lesbar ist.

   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   


   
Creating the responsive website by setting up dimensions in percentage for the HTML element 
   

      

         Column 1
      
      

         Column 2
      
   

Beispiel 2 (Verwendung der Medienabfrage)

Im folgenden Beispiel verwenden wir Medienabfragen, um ein responsives Webdesign zu erstellen. Mithilfe von Medienabfragen können wir Haltepunkte zu Webseiten hinzufügen und diese für jedes Gerät individuell gestalten.

Hier können Benutzer sehen, dass wir die Abmessungen des „Haupt“-Divs für Geräte mit einer Breite von weniger als 600 Pixel geändert haben. Außerdem haben wir die Schriftgröße, die Schriftfarbe und den Rand für die mobilen Geräte geändert, die die Medien verwenden Anfrage.

   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   


   
 Creating the responsive website by Using the media Queries in CSS 
   

      
      

         The above is a logo of TutorilasPoint. The logo is responsive, and it will be displayed in the centre of
         the screen.
      
   

Beispiel 3 (mit Klemmfunktion)

Im folgenden Beispiel haben wir die Funktion „clamp()“ verwendet, um unsere Webseite responsiv zu machen. Die Funktion „clamp()“ benötigt drei Argumente, und das erste ist die minimale Breite, das zweite ist ein Prozentsatz und das dritte ist das Maximum Breite.

Hier übergeben wir 400 Pixel als ersten Parameter, 30 % als zweiten Parameter und 600 Pixel als dritten Parameter der Funktion „clamp()“, was bedeutet, dass die Breite der Karte auf keinem Gerät niedriger als 400 Pixel sein wird. und nicht mehr als 600px. Wenn 30 % der Bildschirmbreite zwischen 400 Pixel und 600 Pixel liegen, wird der Wert auf die Breite der Karte gesetzt.

In der Ausgabe können Benutzer die Karte auf verschiedenen Geräten beobachten und prüfen, ob sie reagiert.

<html>
<head>
   <meta name = "viewport" content = "width=device-width, initial-scale = 1.0">
   <style>
      .card {
         height: 400px;
         width: clamp(400px, 30%, 600px);
         background-color: rgb(13, 247, 247);
         padding: 5px;
         border-radius: 12px;
         border: 2px solid green;
      }
      img {
         height: 90%;
         width: 100%;
         border-radius: 12px;
      }
      .content {
         font-size: 20px;
         font-weight: bold;
         text-align: center;
         padding: 10px;
         color: green;
      }
   </style>
</head>
<body>
   <h2> Creating the responsive website by Using the clamp() function in CSS </h2>
   <div class = "card">
      <img src = "https://thumbs.dreamstime.com/b/environment-earth-day-hands-trees-growing-seedlings-bokeh-green-background-female-hand-holding-tree-nature-field-gra-130247647.jpg"
      Alt = "tree image">
      <div class = "content">
         Save the Environment!
      </div>
   </div>
</body>
</html>

Beispiel 4 (Einführung von Flexbox)

Im folgenden Beispiel stellen wir Flexbox vor, um responsive Webseiten zu erstellen. Wir können „display flex“ verwenden, um jedes HTML-Element als Flexbox anzuzeigen. Anschließend können wir verschiedene CSS-Eigenschaften verwenden, um den Inhalt von Flexbox anzupassen.

Hier haben wir ein „row“-Div, das mehrere „col“-Div enthält. Die Abmessungen des „row“-Divs ändern sich entsprechend den Abmessungen des Geräts, aber die Abmessungen des „col“-Divs sind festgelegt „flex-wrap: Wrap“-CSS-Eigenschaft zum Umschließen des Inhalts innerhalb des „row“-Divs. Sie zeigt die Gesamtzahl der „col“-Divs in den einzelnen Zeilen basierend auf der Breite der Zeile an.

<html>
<head>
   <meta name = "viewport" content = "width=device-width, initial-scale = 1.0">
   <style>
      .row {
         height: auto;
         width: 90%;
         margin: 0 auto;
         background-color: yellow;
         padding: 10px 20px;
         border: 2px solid green;
         border-radius: 12px;
         display: flex;
         flex-wrap: wrap;
         justify-content: space-between;
      }
      .col {
         height: 200px;
         min-width: 200px;
         background-color: red;
         border: 2px solid green;
         border-radius: 12px;
         margin: 10px 20px;
      }
   </style>
</head>
<body>
   <h2>Creating the <i> responsive website </i> by Using the media Queries in CSS. </h2>
   <div class = "row">
      <div class = "col">
      </div>
      <div class = "col">
      </div>
      <div class = "col">
      </div>
      <div class = "col">
      </div>
   </div>
</body>
</html>

In diesem Tutorial haben Benutzer gelernt, wie sie eine Website responsive gestalten. Das obige Beispiel zeigt uns verschiedene CSS-Eigenschaften, -Funktionen und -Regeln, die zur Erstellung responsiver Websites verwendet werden. Entwickler müssen all dies kombinieren, um eine Live-Website zu erstellen. Hier verwenden wir ein einzelnes Attribut in einem einzigen Beispiel nur zu Lernzwecken.

Das obige ist der detaillierte Inhalt vonWas müssen Sie über responsive Websites wissen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!