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自适应屏幕的代码示例：

    
  
    
  
    
    


    
  
自适应屏幕