写页面中需要知道的一些兼容方法

来源:互联网 发布:sql删除前10条记录 编辑:程序博客网 时间:2024/06/03 19:25

首先说一下pc端:pc端一般最恶心的就是ie678 了,那么怎样来兼容它呢?

//ie10以下的样式添加<!--[if IE]>   //ie10以下版本的css js都可以<![endif]-->

当页面出现错乱,你可以用以上的方法来做兼容,但是媒体查询就不兼容了,不要怕,我们只需引入一个js就好

<!--[if IE]>   <script src="https://github.com/a-little-sheep/ie678/blob/master/respond.min.js"></script><![endif]-->

这样ie678也就兼容了媒体查询,但是问题又来了,ie10版本以上也会出现问题,那么怎么解决,不要怕,往下看

//ie10以上版本检测 @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {    /* IE10+ 专属样式添加 */   }

在引入的css代码中,添加上这个,在这个里面写一些兼容ie10版本以上的样式,这个只有ie10以上版本兼容

这样就可以完美实现ie的兼容

pc的问题说了,那么说说移动端:

在移动端中就是想要适应所有手机,那么一般会用rem和百分百还有就是媒体查询

复制代码
//页面是750<script type="text/javascript" class="setfontsize">    $( document ).ready(function() {            Document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + "px";    });</script>
复制代码

这样就可以用rem来写了

有时候会遇到这样的问题,横屏是一版,竖屏又是一版,那么怎么写呢?

复制代码
/*横屏*/@media all and (orientation : landscape) {     /*横屏时样式*/} /*竖屏*/@media all and (orientation : portrait){     /*竖屏时样式*/} 
复制代码

 

原创粉丝点击