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

Posted 2020-10-23 zhaowy

常用视口

<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解决，如下

 

1. <!–[if lt IE 9]>
2. <script src=”../../css3-mediaqueries.js”></script>
3. <![endif]–>

移动端自适应及设置初始rem

 

1. (function() {
2.     function resetFontSize() {
3.         var docElt = window.document.documentElement;
4.         docElt.style.fontSize = docElt.clientWidth / 375 * 100 + ‘px‘;
5.     }
6.     // 在PC上缩小显示（除被iframe外）
7.     if (window.top === window.self && /\b(Windows\sNT|Macintosh)\b/.test(window.navigator.userAgent)) {
9.         window.document.write(
10.             ‘<style>‘ +
11.             ‘html { font-size: 120px!important; }‘ +
12.             ‘body { width: 3.75rem; margin-left: auto !important; margin-right: auto !important; }‘ +
13.             ‘.fixed-full-width { width: 3.75rem; right: 0; margin-left: auto; margin-right: auto; }‘ +
14.             ‘</style>‘
15.         );
16.         return;
17.     }
18.     // 自适应缩放
19.     window.addEventListener(‘resize‘, resetFontSize, false);
20.     resetFontSize();
21. })();