<!-- 声明为 HTML5 文档 -->
<!DOCTYPE html>
<html lang="en">
<head>
<!--
<meta> 元素可提供有关页面的元信息（meta-information），比如描述、针对搜索引擎的关键词以及刷新频率。
<meta> 标签的属性定义了与文档相关联的名称/值对。
<meta> 标签位于文档的头部，不包含任何内容。
属性 值 描述
content some_text 设置或返回 <meta> 元素的 content 属性的值。
http-equiv content-type 把 content 属性关联到 HTTP 头部。
expires
refresh(刷新一次页面,content值为时间)
set-cookie
name author 把 content 属性关联到一个名称。
description(页面的描述)
keywords(为文档定义了一组关键字)
generator
revised(页面的最新版本)
others
charset character encoding HTML 5 中，新增 charset 属性，它使字符集的定义更加容易
scheme some_text HTML 5 中，不再支持 scheme 属性，设置或返回用于解释 content 属性的值的格式。
http-equiv:指示服务器在发送实际的文档之前先在要传送给浏览器的 MIME 文档头部包含名称/值对。
当服务器向浏览器发送文档时，会先发送许多名称/值对。虽然有些服务器会发送许多这种名称/值对，但是所有服务器都至少要发送一个：content-type:text/html。这将告诉浏览器准备接受一个 HTML 文档。
-->
<!-- 声明编码格式为 utf-8 -->
<meta charset="UTF-8">
<!-- 声明一个视图窗口，快捷方式 meta:vp tab键 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>viewport 视图窗口</title>
<!--
1. 当把一个百分百的页面在移动设备浏览的时候，网页的宽度没有和设备的宽度一致，原因是在移动设备当中，浏览器和网页之间还有一层虚拟的容器 这个容器叫viewport。
2、viewport：只在移动设备才有，虚拟容器用来承载网页的，而且主流的设备当中的viewport宽度默认是980px，可以缩放，可以设置尺寸，
使用viewport和流式布局移动端适配
1、网页的宽度和浏览器一致，网页的宽度和视图窗口宽度一致然后试图窗口的宽度一样（和设备的一样）
2、保证网页内容的缩放比和pc端保持一样，视图窗口的缩放比是1.0
3、不允许用户自行缩放，视图窗口禁止缩放。
设置viewport及具体功能
<meta name="viewport" content="width=device-width, initial-scale=1.0">
参数：
width 设置viewport的宽度,单位默认是px。特殊值device-width，设备的宽度
initial-scale 设置viewport的默认缩放比，大于0的数字
user-scalable 设置viewport是否允许用户自行缩放，yes或no（1或0）；
minimum-scale 最小允许缩放比，大于0的数字
maximum-scale 最大允许缩放比，大于0的数字
标签把viewport的宽度设为device-width，同时initial-scale=1，user-scalable = 0就构建了一个标准的移动web页面
-->
<style>
body{
margin:0;
top: 0;
}
.container{
/*1、百分比布局 百分比自适应布局，流式布局 非固定像素布局*/
width: 100%;
height: 1200px;
background:red;
margin: 0 auto;
}
</style>
</head>
<body>
<!-- 经典网页布局 -->
<div class="container">
内容
</div>
</body>
</html>
浙公网安备 33010602011771号