Html5

视口

在 Windows的作图函数中，涉及逻辑坐标到设备坐标的转换。这里提到的窗口（window）、视口(viewport)是对应的概念。
视口是与设备相关的一个矩形区域，坐标单位是与设备相关的“像素”，大多数情况下，视口与客户区相同。窗口的坐标是逻辑坐标，与设备无关，可能是像素、毫米或者英寸。窗口坐标的原点与视口坐标的原点始终对应于同一点。对于同一个图形，用窗口坐标系统表达的该区域的长和宽与视口的坐标系统表达的长和宽是不同的。二者就定义了这两个坐标系统的比例关系。程序作图时，使用的坐标总是是窗口坐标。而实际的显示或输出设备却各有自己的坐标。

视口在响应式设计中是一个非常重要的概念。视口的概念针对移动端浏览器，分为两种视口，一种是可见视口即设备大小，另一种是视窗视口即网页宽度meta标签。

HTML5中，标签可以用于配置视口属性。

例如：

<meta name="viewport" content="user-scalable=no, width=device-width initial-scale=1.0， maximum-scale=1.0>

user-scalable用于设置是否可以缩放，默认yes，
width用于设置视口宽度，这里表示和可见视口相同，
initial-scale用于设置初始缩放比例，取值为0~10.0，
maximum-scale用于设置最大缩放比例取值为0~10.0。

媒体查询

媒体查询可以根据视口宽度、设备方向等差异来改变页面的显示方式。媒体查询由媒体类型和条件表达式组成。
例如：

@media screen and（max-width：960px ){

}

它表示媒体类型为 screen并且屏幕宽度小于等于960pX时的样式。

百分比布局

其实固定布局（以像素为单位）可以换算为百分比宽度，来实现百分比布局换算公式为：
目标元素宽度/父盒子宽度=百分数宽度父盒子宽度
aside {width：250px;}——> aside {width：50%；}*父盒子宽度500pX