css中自适应字体问题等

一、css中自适应字体问题等

1.em跟的是父元素

2.rem跟的是HTML元素

3.让1rem=10px，即如下设置

html:{
    font-size=62.5%;
}

但是因为chrome不支持12px一下的字体大小，所以此设置会在chrome上面出问题

解决这个问题可以把html设置为625%,让1rem=100px方便换算

4.要让字体自适应，还需要写@media，根据合适的尺寸，更改

html:{ font-size:xxx%;}

二、简单HTML满屏问题

设置css

html{
    width:100%;
    height:100%;
 }

三、让点击btn显示box,点击box意外的地方，隐藏box

实现这个，主要解决事件冒泡即可

事件冒泡函数

function stopPropagation(e) {
    if(e.stopPropagation){
        e.stopPropagation();//ie以外的浏览器
    }else{
        e.cancelBubble=false;//兼容ie
    }
}

给整个window绑定click时间，然后在btn让box显示的函数部分，阻止事件冒泡

btn.onclick=function(e){   

str1.indexOf(str2)

 

 box.setAttribute('style','display:block');
stopPropagation(e);
}
window.οnclick=function (e) { box.setAttribute('style','display:none'); };

 

五、查询字符串str1是否含有字符串str2

var str1="hello world!";
var str2="hello";
var result=str1.indexOf(str2);

 

含有则result为str2出现的index位置，若不含有则返回-1，所以判断是否含有则判断result是否小于0

六、解决video.js更换视频src的问题

1.我的原始方案是直接更改source标签的src属性，但是碰到了麻烦，video.js插件，会直接查询浏览器需要使用什么格式的视频文件，然后在某个video标签相关的元素添加一个视频路径的属性，而且你还更改不了，所以最后即使source标签更改成功，但是还是播放回第一个视频文件

2.解决方案：硬来，后来发现只能直接更改video.js的video对象的src值，但是矛盾的是，这个src值只能有一个，但是我并不确定这个浏览器需要什么格式的文件，所以我在更改source标签的src的基础上，获取当前video对象的src，然后判断当前的src是什么格式，然后给video对象设置对应格式的视频

var currUrl = myPlayer.src();
 var vision;
 if (currUrl.indexOf("webm") > 0) {
       vision = ".webm";
} else if (currUrl.indexOf("ogv") > 0) {
       vision = ".ogv";
} else if (currUrl.indexOf("mp4") > 0) {
       vision = ".mp4";
}
  var currSrc = "videos/" + lesson_real_num + vision;

   myPlayer.src(currSrc);

更改视频poster

var posters=document.getElementsByClassName("vjs-poster")[0];//这个类名是video.js自己生成的类名
 posters.style.backgroundImage="url("+poster_url+")";

七、网页大小改变时触发函数

window.onresize=function（e）{

}

八、css加载新字体

@font-face {
    font-family: 'FZShuTi';
    src: url('../font/方正舒体简体.eot');
    src:
            url('../font/方正舒体简体.eot?#iefix') format('embedded-opentype'),
            url('../font/方正舒体简体.woff') format('woff'),
            url('../font/方正舒体简体.ttf') format('truetype'),
            url('../font/方正舒体简体.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

字体的各种格式可以上网找在线网站转换格式

九、让背景照片百分百铺满div

background-image: url('../images/bg.png');
background-size:100% 100%;
background-repeat: no-repeat;

十、position问题

当position=absolute的时候，该元素的位置以及margin，等等的相对对象是最近的有设置position为relative或absolute的父对象

video标签的层数是最优先的，而且无法用z-index控制，所以所有元素无法浮在video上面，如果要实现，就必须让元素脱离文本流，设置position为absolute

十一、子元素浮动，导致父元素高度为0的解决方案

在父元素里最后的位置设置一个空的div清除浮动

 height:0; 
visibility:hidden; 
display:block;
 clear:both;

十二、让一行字超出宽度后点点点

text-overflow:ellipsis;
white-space:nowrap;
overflow:hidden;