HTML实现手机端适配

适配有些网页在电脑浏览器上看还行，可是放在手机上看就觉得不好看。从UI设计的角度来讲，网页的UI和移动端的UI设计理念是不同的，所以网页要有网页的UI，移动端要有移动端的UI。我们要怎么做呢？示例代码<!DOCTYPE html><html><head><meta charset="utf-8" /><meta name="viewport"

大前端工程师

20956人浏览 · 2021-06-12 13:25:58

大前端工程师 · 2021-06-12 13:25:58 发布

适配

有些网页在电脑浏览器上看还行，可是放在手机上看就觉得不好看。从UI设计的角度来讲，网页的UI和移动端的UI设计理念是不同的，所以网页要有网页的UI，移动端要有移动端的UI。我们要怎么做呢？

示例代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0">
		<title></title>
		<style>
			/* 小屏幕手机端 */
			@media (min-width: 0px) and (max-width:768px) {
				.div1{
					width: 100px;
					height: 100px;
					background-color: red;
				}
			}
			
			/* 中等屏幕（桌面显示器，大于等于 992px） */
			@media (min-width: 768px) and (max-width:992px){
				.div1{
					width: 300px;
					height: 300px;
					background-color: blue;
				}
			}
			
			/* 大屏幕（大桌面显示器，大于等于 1200px） */
			@media (min-width: 992px) {
				.div1{
					width: 500px;
					height: 500px;
					background-color: aqua;
				}
			}
		</style>
	</head>
	<body>
		<div class="div1"></div>
		<script></script>
	</body>
</html>

大家把这个代码复制到你的HTML编辑器上，在浏览器上运行后。以拖拽的方式，不断缩小浏览器的宽度。看看会发生什么？

当浏览器窗口宽度很大时候：
显示500×500的青蓝色块

当浏览器窗口中等时候：
显示300×300的蓝色色块

当浏览器窗口非常小的时候：
显示100×100的红色色块

这种布局叫做响应式布局，会根据窗口宽度，自动变化样式

响应式布局

媒体查询

媒体查询是css的技巧之一，它是用@media来实现的

	/* 小屏幕手机端 */
	@media (min-width: 0px) and (max-width:768px) {
		.div1{
			width: 100px;
			height: 100px;
			background-color: red;
		}
	}
	
	/* 中等屏幕（桌面显示器，大于等于 992px） */
	@media (min-width: 768px) and (max-width:992px){
		.div1{
			width: 300px;
			height: 300px;
			background-color: blue;
		}
	}
	
	/* 大屏幕（大桌面显示器，大于等于 1200px） */
	@media (min-width: 992px) {
		.div1{
			width: 500px;
			height: 500px;
			background-color: aqua;
		}
	}