探讨兼容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,是指使产品在特定文化和语言市场中可用. 对开发者来说,国际化一个应用意味着将所有的 ...
随机推荐
- 1264: [AHOI2006]基因匹配Match
1264: [AHOI2006]基因匹配Match Time Limit: 10 Sec Memory Limit: 162 MBSubmit: 982 Solved: 635[Submit][S ...
- c语言考前最后一天
明天就是考验这1个多月学习c语言的总结了,所以今天是个重要的日子,明天是个神圣的日子. 但是我还很多地方不明白,特别是函数,循环,这两个都是c语言最重要的,但我却没学好,上课还 时不时走神所以现在学的 ...
- 断今天日期和指定日期相等和两者的时间差为两年的sql
1. ---判断今天日期和指定日期相等 update store set Status =1 where CONVERT(varchar(12) ,opendate, 105 )= CONVERT ...
- JAVA的垃圾回收机制
1. 垃圾回收的意义 在C++中,对象所占的内存在程序结束运行之前一直被占用,在明确释放之前不能分配给其它对象:而在Java中,当没有对象引用指向原先分配给某个对象的内存时,该内存便成为垃圾.JVM的 ...
- 51Nod-1091 线段的重叠
51Nod 1091: http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1091 1091 线段的重叠 基准时间限制: ...
- MyISAM 和InnoDB 的区别.(存储,索引, 事务, 锁)
MyISAM类型的表强调的是性能,但是不支持事务.及外部键等高级功能. MySQL默认采用的是MyISAM. MyISAM不支持事务,而InnoDB支持.InnoDB的AUTOCOMMIT默认是打开的 ...
- .pop ----remove 删除
s = {1,2,3,4,5,6,'sn','7'} s.pop()#删除随机值 print(s)#{2, 3, 4, 5, 6, '7', 'sn'} s.remove('sn')#删除值 prin ...
- Android Studio各种快捷功能及好用的插件
转载:http://www.jianshu.com/p/c439605a4364 概述 现如今开发越来越追求效率和节奏,节省出时间做更多的事情,除了开发技术上的封装等,开发工具的使用技巧也是很重要的, ...
- 做参数可以读取参数 保存参数 用xml文件的方式
做参数可以读取参数 保存参数 用xml文件的方式 好处:供不同用户保存适合自己使用的参数
- java 跨平台 数据类型 修饰符 程序结构
java跨平台的实现: .java文件 ——编译(javac)——> 二进制字节码的.class文件 ——不同平台的虚拟机(JVM)——>对应硬件平台可执行的代码 java数据类型的划分: ...