HTML5学习小记四

1.图片在div中居中显示

CSS样式如下：

div{width:300px; height:150px; background-color:#CCC; border:#000 1px solid;text-align:center;padding-top:50px;}

margin:0 auto;

position: relative;

2.css中rem 与 px 之间的换算关系

rem 和 em 都是一个相对大小的值，它是相对于根元素<html>;

当我们将<HTML>的文字设置为14px时,将px的数值除以14即可得到rem的值:比如将某个值设置为960px,换算成rem就是960/14rem;

rem是一个参照数值,如果没有在根元素指定参照值，浏览器的默认值为 1rem 为 16px,如果将html设置为20px，那 1rem 就相当于 20px. https://lms.im/css/1069.html

3.当有多个div时,设置自动换行执行命令;

4.document.onreadystatechange

window.addEventListener,document.onreadystatechange监听网络加载状态的改变,后面可以绑定相关的方法,当改变加载状态是执行:

document.onreadystatechange=function(){

if(document.readyState=="complete"){

setTimeout('$(".zz").css("display","none")',500);
}
}

一篇较好的解释: http://www.jb51.net/article/20445.htm

5.indexOf()
indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。
例:tmpString.indexOf(substring,fromIndex)
这个方法表示:从头到尾地检索字符串tmpString是否含有子串 substring。如果找到一个 substring，则返回 substring 的第一次出现的位置;tmpString 中的字符位置是从 0 开始的,如果没有找到则返回-1;(区分大小写)
6.userAgent
根据 user agent 的信息获取浏览器信息;

ua = navigator.userAgent.toLowerCase(), // 根据 user agent 的信息获取浏览器信息
        deviceWidth = window.screen.width, // 设备的宽度
        devicePixelRatio = window.devicePixelRatio || 1, // 物理像素和设备独立像素的比例，默认为1
        targetDensitydpi;
/* Android4.0以下手机不支持viewport的width，需要设置target-densitydpi
  //ua.indexOf("android") !== -1//如果是安卓设备则返回true
 //parseFloat(ua.slice(ua.indexOf("android") + 8)) < 4//获取手机版本号小于4
*/
    if (ua.indexOf("android") !== -1 && parseFloat(ua.slice(ua.indexOf("android") + 8)) < 4) {
        targetDensitydpi = DEFAULT_WIDTH / deviceWidth * devicePixelRatio * 160;
        $('meta[name="viewport"]').attr('content', 'target-densitydpi=' + targetDensitydpi + ', width=device-width, user-scalable=no');
    }

获取到浏览器的类型(内容出自:https://www.douban.com/note/348261828/):

如果更关注浏览器的能力而不在乎它实际的身份，就可以使用这种方法。
var ua = navigator.userAgent.toLowerCase(); //获取用户端信息
var info = {
 ie: /msie/.test(ua) && !/opera/.test(ua), //匹配IE浏览器
 op: /opera/.test(ua), //匹配Opera浏览器
 sa: /version.*safari/.test(ua), //匹配Safari浏览器
 ch: /chrome/.test(ua), //匹配Chrome浏览器
 ff: /gecko/.test(ua) && !/webkit/.test(ua) //匹配Firefox浏览器
};
(info.ie) && alert("IE浏览器");
(info.op) && alert("Opera浏览器");
(info.sa) && alert("Safari浏览器");
(info.ff) && alert("Firefox浏览器");
(info.ch) && alert("Chrome浏览器");

HTML5学习小记四

推荐阅读更多精彩内容