<!-- 声明为 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>