码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2018-02-02 20:05:06      阅读:239      评论:0      收藏:0      [点我收藏+]

标签:允许   notice   安装   alt   turn   scale   手机浏览器   gen   1.0   

常用视口

<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)) {
  8.         window.document.write(
  9.             ‘<style>‘ +
  10.             ‘html { font-size: 120px!important; }‘ +
  11.             ‘body { width: 3.75rem; margin-left: auto !important; margin-right: auto !important; }‘ +
  12.             ‘.fixed-full-width { width: 3.75rem; right: 0; margin-left: auto; margin-right: auto; }‘ +
  13.             ‘</style>‘
  14.         );
  15.         return;
  16.     }
  17.     // 自适应缩放
  18.     window.addEventListener(‘resize‘, resetFontSize, false);
  19.     resetFontSize();
  20. })();

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

标签:允许   notice   安装   alt   turn   scale   手机浏览器   gen   1.0   

原文地址:https://www.cnblogs.com/zhaowy/p/8406472.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!