<!DOCTYPE html>
<html lang="en">
<head>
<!-- 设置网页编码 -->
<meta charset="UTF-8">
<!-- 设置网页关键字 -->
<meta name="keywords" content="">
<!-- 设置网页描述 -->
<meta name="description" content="">
<!-- 设置网页不能出现缩放效果
width=device-width: 让盒子的宽度与当前设备一样宽,
initial-scale=1; 禁止缩放
禁止用户手动缩放(有些移动设备浏览器,还会支持,有些浏览器不支持)
user-scalable=no
-->
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<title>Document</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.box {
width: 100%;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div class="box">萨达撒旦法撒旦法</div>
<!-- <video></video> -->
<!-- 最理想的网页布局: -->
<!-- 1. 让盒子宽度与设备宽一样 -->
<!-- width: 100%; -->
<!-- 2. 网页布局中不能出现缩放效果 通过 meta标签设置-->
<!-- 总结: 使用流式布局实现页面适配的步骤
1. 保证宽度等于设备宽
width: 100%;
2. 保证页面中不能出现缩放效果
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
-->
</body>
</html>
