探讨兼容IE低版本的PC端响应式布局
http://www.jiangweishan.com/article/lowIeResposive.html
响应式布局,oh my god!!有点醉了,感觉是老生常谈的话题了。虽然已经谈过很多了,但这次也很有必要拿出来探讨下。为什么呢?往下看呗。。。
最 近在折腾公司首页的改版,设计师设计了三个版本,宽度分别为1600px,1200px,960px。看到这三个尺寸的设计,很明显需要做PC端的响应 式,我们都知道针对IE9+和其他高富帅浏览器的响应式,使用Media Query轻松搞定。至于IE8以下的,平常项目中都是设置一个最小宽度,屏幕缩小的时候状态栏出现滚动条。现实并不是我们想象的那么简单,我们需要默认 显示1600px的宽度,那么在IE8以下的这种方法不太合适了,因为屏幕太宽。
于是打开谷歌、百度,疯狂搜索,逛 了一圈。给我的总结:都是围绕2个处理方法,就是要用到第三方插件库:
第一种:https://github.com/livingston/css3-mediaqueries-js
第二种:https://github.com/scottjehl/Respond
具体方法我们可以打开连接查看相关应用方法,这里就不啰嗦了。使用过后的感觉:代码太臃肿了,效果也一般,在IE7/8容易出现闪屏情况等等,乱七八糟问题,暂且放弃。
心有不甘,继续seaching,最后发现淘宝和天猫的新版首页也用到了PC端响应式,进行了一番研究,他们用的是取屏幕宽度,然后通过resize方法来实现PC端响应式,代码要比上面说的方法简洁,暂采用吧,这里我想分享下:
- $(window).resize(function () {
- screenRespond();
- });
- screenRespond();
- function screenRespond(){
- var screenWidth = $(window).width();
- if(screenWidth <= 1800){
- $("body").attr("class","w1800");
- }
- if(screenWidth <= 1400){
- $("body").attr("class","w1400");
- }
- if(screenWidth > 1800){
- $("body").attr("class","");
- }
- }
上面是我在项目中使用的方法,虽然跟淘宝天猫有些不同,但是大同小异,核心一样。定义一个函数,然后执行,最后屏幕变化的时候resize,根绝不同尺寸,我们给body新增一个class,用这个父级class控制相应尺寸内容响应式,看下我从项目中截取的CSS代码
- /* response */
- .w1800 .screen-wid{width:1200px}
- .w1800 .p-top-lin,.w1400 .p-top-lin{border:solid #e5e5e5;border-width:1px 0 0}
- .w1800 .dchart-conut{width:100px}
- .w1800 .dchart-conut p{padding:8% 0}
- .w1400 .screen-wid{width:960px}
- .w1400 .header_fixed .menu-navbox{margin-left:8%}
- .w1400 .header_fixed .menu-navbox li{padding:17px 1.2%}
- .w1400 .header_fixed .menu-slide-down li{padding:0}
- .w1400 .menu-navbox{margin-left:25%}
- .w1400 .menu-navbox li{padding:17px 2%}
- .w1400 .menu-navbox .none-mar{padding-right:0}
- .w1400 .menu-slide-down li{padding:0}
- .w1400 .menu-navbox a{font-size:15px}
一个庞大的首页响应式【兼容ie7/8】,用这样的代码轻松搞定。考虑诸多方面的因素,我认为这是最好的方法
探讨兼容IE低版本的PC端响应式布局的更多相关文章
- PC 端响应式布局
前言:PC端 电脑显示器的尺寸种类还是很多的,台式电脑和笔记本电脑尺寸相差就更明显,所以响应式布局还是很重要的,甚至是必须要考虑的. 响应式的页面好不好,在后管平台上很明显.因为后管平台,一般是全屏显 ...
- 移动端响应式布局--你不知道的CSS3.0媒体查询,解决rem部分情况下无法适配的场景
媒体查询作为响应式布局的方法之一,实际项目中用途也很广.但是你真的知道怎么用吗? 例如,下面匹配 iphone6/7/8 屏幕 @media screen and (max-width: 375px) ...
- 【CSS-移动端响应式布局详解】
背景 移动端响应式布局开发主要方案有: 基于rem开发 基于媒体查询 基于弹性盒 基础概念 在讨论响应式布局知识前,先了解下移动端常用基础概念. 逻辑像素(CSS pixels) 浏览器使用的抽象单位 ...
- 响应式布局rem、rem方法封装、移动端响应式布局
相信大家在做移动端的时候都会做各个手机的适配这种适配就是响应式布局在之前做网站的响应式从pc到手机用的是媒体查询 @media screen and (max-width: 300px){} 最大宽度 ...
- pc端响应式-媒体查询
媒体查询(@media):能在不同的条件下使用不同的样式,使页面在不同在终端设备下达到不同的渲染效果 列举常用的pc屏幕宽度: 1024 1280 1366 1440 1680 1920 ...
- 移动端响应式布局+rem+calc()
1.媒体查询:@media only screen and (max-width: ) {},在最初做pc端时,使用各种媒体查询,因为pc的屏幕分辨率总共就几种,不嫌麻烦的重复使用类名.有很大的缺陷就 ...
- 移动端响应式布局,rem动态更新
(function(){ var fontSizeMatchDeviceWidth = function(){ var deviceWidth = document.documentElement.c ...
- 移动端“响应式布局”’--rem
使用目的:为了让移动设计稿在大部分的移动设备上看起来有一致的展示效果,我们使用rem的像素单位. 方法一: 1.在页面引入js,获取屏幕大小,更新rem基准. (function () { var c ...
- AngularJS开发指南7:AngularJS本地化,国际化,以及兼容IE低版本浏览器
AngularJS本地化,国际化 国际化,简写为i18n,指的是使产品快速适应不同语言和文化. 本地化,简称l10n,是指使产品在特定文化和语言市场中可用. 对开发者来说,国际化一个应用意味着将所有的 ...
随机推荐
- 6.bootstrap练习笔记-缩略图和list-group
bootstrap练习笔记-缩略图 1.其实缩略图很简单,只要按照固定的格式来设计 div.container 总容器 在宽度为1200px以上 div.row 一行内容 div.col-lg-3. ...
- 关于ES6新增的东西
查询浏览器对ES6的支持情况https://kangax.github.io/compat-table/es6/ Chrome.MS Edge.Firefox.Safari.Node和其它很多环境都已 ...
- 将对象转化成json字符串
public static String getObjectString(Object object){ String ObjectString = null; try { ObjectMapper ...
- PHP开发环境搭建
链接: Q&A1.Mac下的PHP环境搭建 Mac 下如何搭建 PHP 开发环境? [PHP] Mac下homebrew安装及php.mysql.nginx环境安装及配置个人PHP开发环境的选 ...
- ELK日志系统:Elasticsearch + Logstash + Kibana 搭建教程
环境:OS X 10.10.5 + JDK 1.8 步骤: 一.下载ELK的三大组件 Elasticsearch下载地址: https://www.elastic.co/downloads/elast ...
- 初学C#和MVC的一些心得,弯路,总结,还有教训(4)--Cache 关于创建多个缓存实例
asp.net中的数据缓存可以用 HttpRuntime.Cache ,这个是大家都知道的,但如果缓存的数据比较多,又比较杂乱,想要把缓存分开管理(也就是创建多个缓存实例)应该怎么做呢... 于是常规 ...
- 微信内嵌html5页面清楚缓存
给每个js添加一个版本号,每次修改js后改变一下版本号,浏览器即可自动刷新不用手动清理缓存 <script src="<%=path%>/js/boss/kpi/redli ...
- iptables能够做什么
前言 在这两篇博文中已经具体分析了iptable的原理和在openwrt里面的实例 http://www.cnblogs.com/tanhangbo/p/4550455.html http://www ...
- 【转】js实现复制到剪贴板功能,兼容所有浏览器
两天前听了一个H5的分享,会议上有一句话,非常有感触:不是你不能,而是你对自己的要求太低.很简单的一句话,相信很多事情不是大家做不到,真的是对自己的要求太低,如果对自己要求多一点,那么你取得的进步可能 ...
- C++链表
之前用C写链表的时候,结点使用结构体封装的,操作起来总是感觉很麻烦.C++中使用类来封装结点,感觉操作起来方便多了,内存回收也感觉很清楚. 最近,做Gps数据分析时,别人要求加一个树形控件. Gps数 ...