HTML 響應式
- WBOY原創
- 2024-09-04 16:46:49583瀏覽
HTML 中的響應式設計是根據每種螢幕尺寸的裝置尺寸來適應 HTML 元素的概念。這些元素在行動裝置、桌上型電腦或平板電腦等每種裝置上都應該看起來很完美。響應式設計是指元素根據顯示視圖中的可用空間快速調整。它基於視口寬度、文字大小、回應圖像和其他元素等。如今，響應式設計術語涉及許多新技術，以完美適應不同瀏覽器和設備的設計。媒體查詢是最好的部分之一，包括透過 CSS 進行響應式設計，它告訴瀏覽器根據使用者的裝置尺寸進行調整。
HTML 響應式設計中所使用的語法
HTML 中的響應式設計取決於許多因素；讓我們一一看看：
1。設定視窗：下面的語法用於將視窗設定為使用者頁面視圖，這有助於瀏覽器控制網頁的尺寸及其縮放。它會根據不同的設備尺寸自動調整元素並根據設備顯示螢幕。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
2。 響應式圖像：每當網頁添加一些圖像時，也需要在每個裝置的螢幕尺寸上以適當的尺寸顯示這些圖像。
<div class='section content'> <img class='example' src='images/example.svg' /></div>
3。設定寬度屬性：借助CSS，我們可以將寬度設定為100%，這有助於使元素在螢幕顯示視圖中響應。
width: 100%;
4。使用最大寬度屬性： 與寬度相同，可以將元素的最大寬度設為 100 %，因此它將幫助我們以正確的回應格式顯示所有 HTML 元素。
Max-width:100%;
5。響應式文字：與另一個元素相同，有必要使文字也根據螢幕尺寸在所有裝置中負責。可以使用VW進行設置，這可以幫助用戶設置視口寬度，以便根據設備螢幕輕鬆調整文字大小。此語法解釋了視口被稱為瀏覽器顯示尺寸。這裡 1 VW 等於實際視窗寬度的 1%。
<h4 style="font-size:5vw">Text</h4>
6。使用媒體 查詢： 媒體查詢在響應式設計中發揮著重要作用，可以使文字、圖像和其他元素對不同瀏覽器尺寸的不同設備尺寸更具響應性。現在有不同的框架可以讓我們的網頁更具回應性。他們就像：
- 響應式樣式表：這個框架幫助我們使用不同的樣式錶框架，例如 W3.CSS，它在創建響應式設計時發揮主要作用。預設情況下，它支援行動優先設計。它很容易學習和開發。
- Bootstrap：它是最受歡迎的框架，正在快速增長並免費提供給用戶。它比其他框架更用戶友好，因為它基於 HTML、CSS 和 jquery 等 Web 開發語言，這有助於使網頁響應更快。
- 最新響應式CSS：支援各種瀏覽器以及智慧型手機、平板電腦、筆記型電腦等所有類型的裝置
在 HTML 中實作響應式的範例
以下是 HTML 中響應式的範例。
範例#1
在此範例中，我們在 HTML 程式碼中設定視口，並使圖像具有響應能力。
HTML 程式碼：
<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>
在桌上型電腦或筆記型電腦螢幕上輸出：
行動裝置上的輸出：
平板電腦上的輸出：
範例#2
在範例 2 中，我們使用媒體查詢使螢幕回應。這將幫助我們透過使用程式碼支援各種瀏覽器以及各種裝置來回應網頁：
HTML 程式碼：
<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>
桌面檢視上的輸出：
行動裝置上的輸出：在行動裝置中，輸出螢幕將是可捲動的，因此要看到整個網頁，我們必須在螢幕上向下捲動。
平板電腦設備上的輸出：相同的輸出將根據平板電腦設備尺寸進行調整。
範例#3
讓我們來看另一個使用 bootstrap、標準 CSS 和媒體查詢的範例 3：
HTML 程式碼：
<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.
以上是HTML 響應式的詳細內容。更多資訊請關注PHP中文網其他相關文章！