HTML自適應屏幕大小

一、怎麼讓HTML自適應屏幕大小

在移動設備的瀏覽器中使用HTML時，一定要考慮頁面的自適應問題。為了讓HTML頁面自適應不同尺寸的屏幕，開發人員可以採用以下幾種方法：

1、使用Viewport Meta標籤
Viewport Meta標籤是用來告訴瀏覽器這個網站的最初視口的設定。我們可以利用這個標籤來設置網頁的縮放比例、寬度和高度，以讓頁面自適應不同尺寸的屏幕。

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">

2、使用CSS3的@media查詢
CSS3 @media查詢可以根據不同的設備、不同的屏幕大小和不同的解析度調用不同的CSS文件，從而實現頁面的自適應。以下是一個通過@media查詢來實現頁面自適應的例子：

/* 以下是通過 @media 查詢實現自適應布局的實例 */
@media screen and (min-width: 480px) {
  /* 手機端橫屏（豎屏會忽略該樣式） */
  body {
    background-color: lightgreen;
  }
}
@media screen and (min-width: 768px) {
  /* 平板電腦 */
  body {
    background-color: lightblue;
  }
}
@media screen and (min-width: 992px) {
  /* 桌面顯示器 */
  body {
    background-color: lightgray;
  }
}

二、HTML自適應屏幕代碼

以下是一個基於Viewport Meta標籤和CSS3的@media查詢實現HTML自適應屏幕的代碼示例：

 body {
 padding: 0;
 margin: 0;
 }
 .box {
 width: 100%;
 height: 500px;
 background-color: gray;
 text-align: center;
 line-height: 500px;
 font-size: 48px;
 color: white;
 }
 @media screen and (max-width: 480px) {
 .box {
 font-size: 24px;
 height: 300px;
 line-height: 300px;
 }
 }
 @media screen and (min-width: 480px) and (max-width: 768px) {
 .box {
 font-size: 36px;
 height: 400px;
 line-height: 400px;
 }
 }
 自適應屏幕
原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/286829.html