写页面中需要知道的一些兼容方法
2017-07-20 10:28
239 查看
首先说一下pc端:pc端一般最恶心的就是ie678 了,那么怎样来兼容它呢?
当页面出现错乱,你可以用以上的方法来做兼容,但是媒体查询就不兼容了,不要怕,我们只需引入一个js就好
这样ie678也就兼容了媒体查询,但是问题又来了,ie10版本以上也会出现问题,那么怎么解决,不要怕,往下看
在引入的css代码中,添加上这个,在这个里面写一些兼容ie10版本以上的样式,这个只有ie10以上版本兼容
这样就可以完美实现ie的兼容
pc的问题说了,那么说说移动端:
在移动端中就是想要适应所有手机,那么一般会用rem和百分百还有就是媒体查询
这样就可以用rem来写了
有时候会遇到这样的问题,横屏是一版,竖屏又是一版,那么怎么写呢?
//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){ /*竖屏时样式*/ }
相关文章推荐
- ios-day11-05(关于UIView,我们需要知道的一些方法)
- 在页面布局中,一些常用到的兼容方法
- 【转】优化网站加载时间:你需要知道的一些小方法
- 本来从动态壁纸预览页面设置一个动态壁纸回到桌面便可以看到桌面动态壁纸,可以观察得到自己的动态壁纸是否设置成功了(必须知道设置是否成功的结构,因为还有一些操作需要完成)! 但是现在是要在自己的应用中进入
- 一些程序员需要知道的资源
- Android一些你需要知道的布局优化技巧
- Android一些你需要知道的布局优化技巧
- 你所需要知道的一些git 的使用命令:基本技巧
- jquery-mobile的页面跳转和iscroll之间的兼容解决方法
- 程序员需要知道的互联网业界的一些黑话
- 关于从网上复制一些网页内容的时候,会提示需要注册才能复制的解决方法
- 页面在IE9中打不开,需要按F12,再刷新,才可以正常打开(PS:由于console.log在IE中的兼容问题)
- 你所需要知道的一些git 的使用命令:克隆
- CSS兼容的一些解决方法
- PowerDesigner16.5快速入门显示,注释comment配置方法,以及创建sql文件过程中需要注意的一些问题
- java开发需要知道的一些linux命令
- 单例模式的一些需要知道的东西
- 你所需要知道的一些git 的使用命令:Git大师
- iOS/Android/WAP 全兼容专题页面制作方法(一)
- 移动端页面开发时需要注意的一些问题总结