HTML视口相关的设置

视口概念

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

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。

媒体查询

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

@media screen and（max-width：960px ){
	/样式设置*/
}

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

兼容js文件加载

lE8既不支持HTML5也不支持CSS3 Media，所以我们需要加载两个JS文件，来保证我们的代码实现兼容效果：

< - -[iftE9]>
scriptsrc="https://oss.maxcdn.com/libs/html5shiv/3.7.0/htmlsshivjs"></script>
scriptsrc="https://oss.maxcdn.com/libs/respondjs/1.3.0/respond.min.js"></script>
<![endif]- ->

断点的设置

  传统的确定断点的方案是使用一些固定的宽度进行划分，如320pX（ iPhone）768pX（iPad），960pX或1024pX（传统PC浏览器），这种方案的好处是很好照顾到了当前主流的设备，但是技术发展实现是太快了，各种不同分辨率的设备层出不穷比如一些手机尺寸接近平板，一些平板尺寸比电脑更大等等，很难保证未来能很好的支持各种设备。另外一种确定断点的方法是根据内容进行设置断点以及设置多少个断点。随着各种尺寸设备的出现，断点命名采用更为通用的方式，而不是用设备来命名更为合适

百分比布局

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