常用视口
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
viewport 是用户网页的可视区域。
viewport 翻译为中文可以叫做"视区"。
手机浏览器是把页面放在一个虚拟的"窗口"（viewport）中，通常这个虚拟的"窗口"（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。
可能的值：
- width---viewport的宽度 可能的值 像素| device-width
- height – viewport的高度---可能的值 像素| device-height
- initial-scale – 初始的缩放比例
- minimum-scale – 允许用户缩放到的最小比例
- maximum-scale – 允许用户缩放到的最大比例
- user-scalable – 用户是否可以手动缩放---可能的值yes||no或者1||0
- target-densitydpi--- [dpi_value | device-dpi | high-dpi | medium-dpi | low-dpi]
<meta http-equiv="X-UA-Compatible" content="IE=edge">
此属性为文档兼容模式声明，表示如果在IE浏览器下则使用最新的标准渲染当前文档
- X-UA-Compatible是自从IE8新加的一个设置，对于IE8以下的浏览器是不识别的。
- IE=edge 告诉IE,IE8以后的版本使用最新版本的引擎渲染网页;
- chrome=1安装了GCF后可以激活Chrome Frame.
emmet快捷键：meta:compat
最后说下IE浏览器，因为IE9以下不支持media Queries的，使用时需要引用一个Media Query Javascript解决，如下
- <!–[if lt IE 9]>
- <script src=”../../css3-mediaqueries.js”></script>
- <![endif]–>
移动端自适应及设置初始rem
- (function() {
- function resetFontSize() {
- var docElt = window.document.documentElement;
- docElt.style.fontSize = docElt.clientWidth / 375 * 100 + ‘px‘;
- }
- // 在PC上缩小显示（除被iframe外）
- if (window.top === window.self && /\b(Windows\sNT|Macintosh)\b/.test(window.navigator.userAgent)) {
- window.document.write(
- ‘<style>‘ +
- ‘html { font-size: 120px!important; }‘ +
- ‘body { width: 3.75rem; margin-left: auto !important; margin-right: auto !important; }‘ +
- ‘.fixed-full-width { width: 3.75rem; right: 0; margin-left: auto; margin-right: auto; }‘ +
- ‘</style>‘
- );
- return;
- }
- // 自适应缩放
- window.addEventListener(‘resize‘, resetFontSize, false);
- resetFontSize();
- })();
