写网站经常需要用到的代码汇总

常用视口

<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 && /(WindowssNT|Macintosh)/.test(window.navigator.userAgent)) {

        window.document.write(
            '<style>' +
            'html { font-size: 120px!important; }' +
            'body {  3.75rem; margin-left: auto !important; margin-right: auto !important; }' +
            '.fixed-full-width {  3.75rem; right: 0; margin-left: auto; margin-right: auto; }' +
            '</style>'
        );
        return;
    }
    // 自适应缩放
    window.addEventListener('resize', resetFontSize, false);
    resetFontSize();
})();