探讨兼容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,是指使产品在特定文化和语言市场中可用. 对开发者来说,国际化一个应用意味着将所有的 ...
随机推荐
- 第4章 文本编辑器vim
1. vim常用操作 1.1 vim简介 (1)vim是一个功能强大的全屏幕文本编辑器,是Linux/Unix上最常用的文本编辑器,它的作用是建立.编辑.显示文本文件. (2)vim没有菜单,只有命令 ...
- C# 把日期字符串转换为日期类型 (MM大写为月、小写为分钟)
string dtStr; DateTime dtTime; 尝试把时间字符串转为DateTime格式 if (DateTime.TryParse(dtStr, out dtTime)) { //st ...
- VPS搭建VPN、BLOG
FQ的正确姿势,你掌握了多少?老司机带你去墙外看看,来开车了坐稳! 购买VPS主机(服务端) 推荐性价比较高的VPS 搬瓦工https://bandwagonhost.com/ 上面的链接如果你打不开 ...
- mybatis 使用经验小结
一.多数据源问题 主要思路是把dataSource.sqlSesstionFactory.MapperScannerConfigurer在配置中区分开,各Mapper对应的包名.类名区分开 <? ...
- 你一无所知的CSS
也许标题有点夸大了.虽然不能完全保证大家都不知道这些,但是这也算是一个好机会检测下你是否知道或使用过下面的内容. Selectors Root :root { } 使用root可以让你在DOM中选择 ...
- 马后炮之12306抢票工具(四)--抢票Demo,2014年1月9日终结版
时隔一年多,终于朋友的忽悠下吧抢票Demo的最后一步完善了,与2014年1月9日成功生成车票. Demo仅经过自己测试,并未在高峰期进行测试,代码质量很差,因为赶工,套用去年模板并未使用设计模式. 代 ...
- js精确加减乘除
//加法函数function accAdd(arg1, arg2) { var r1, r2, m; try { r1 = arg1.toString().split(".")[1 ...
- BZOJ 1005 [HNOI2008] 明明的烦恼(组合数学 Purfer Sequence)
题目大意 自从明明学了树的结构,就对奇怪的树产生了兴趣...... 给出标号为 1 到 N 的点,以及某些点最终的度数,允许在任意两点间连线,可产生多少棵度数满足要求的树? Input 第一行为 N( ...
- C# 6.0 新特性
1.C# 6.0 示例 1: 自动属性支持初始化, 字符串嵌入的新方式, 通过 Using Static 引用静态类, nameof 表达式CSharp6/Demo1.xaml.cs /* * C# ...
- 解决:Linux版百度云客户端 BCloud网络错误 问题
国内很多云盘渐渐停止服务支持,如新浪.华为.115.360等... 强大的百度云,你会继续免费让大家使用吗? 今天在Linux上使用了liulang的BCloud百度云客户端,登陆之后不显示主页,什么 ...