@media 兼容问题

解决@media screen （自适应）IE浏览器不兼容问题

1.解决兼容性问题 (1)页面最顶部必须定义:<!DOCTYPE html> (2)点击:下载 respond.js 文件 (3)引入<script src="respond.js"></script>:respond.js必须在样式表之后引用: (4)页面必须在服务器环境中运行,直接打开用不了 2.使用css3判断窗口大小设置不同样式: 举个例子: /*宽度小于500px时:背景为红色*/ @media screen and (max-width:

@media兼容iphone4、5、6

在网页中,pixel与point比值称为device-pixel-ratio,普通设备都是1,iPhone 4是2,有些Android机型是1.5. 那么-webkit-min-device-pixel-ratio:2可以用来区分iphone(4/4s/5)和其它的手机 iPhone4/4s的分辨率为640*960 pixels,DPI为是320*480,设备高度为480px iPhone5的分辨率为640*1136 pixels,DPI依然是320*568,设备高度为568px iPhone6

什么是响应式设计？响应式设计的基本原理是什么？如何兼容低版本的 IE？

响应式网站设计(Responsive Web design)的理念是:集中创建页面的图片排版大小,可以智能地根据用户行为以及使用的设备环境(系统平台.屏幕尺寸.屏幕定向等)进行相对应的布局,无论用户正在使用笔记本还是iPad,我们的页面都应该能够自动切换分辨率.图片尺寸及相关脚本功能等,以适应不同设备. 响应式Web设计不仅仅是关于屏幕分辨率自适应以及自动缩放的图片等等,它更像是一种对于设计的全新思维模式, 如我们需要兼容不同屏幕分辨率.清晰度以及屏幕定向方式竖屏(portrait).横屏(

Android 最新 Support V4 包大拆分有用吗？

Google 更新了最新的 Support Library 版本,其中最为显眼的功能莫过于 support-v4 大拆分,然后这个拆分现在看来并没有那么美好. v4 包从 2011 年开始引入,包含 ViewPager.FragmentActivity 等我们常用的功能,目前已经达到 1.3 M,Google 此次升级将这个库拆分为 5 个子的 Module,每个 Module 可以被单独引用. 1. 子 Module 介绍五个子 Module 分别为:(1) support-compat 兼

【转】Android Support Library详细介绍

网上对Android Support Library中各个依赖包介绍的中文资料太少了,结合官方文档和有限的参考资料做了一次总结,有描述得不对的地方还请指正. 一.主工程.依赖包.jar包.android.jar.Android Support Library的关系一个Android工程通常包括主工程和依赖包,依赖包又有两种形式: 一种是单独的工程或者aar:在主工程的配置文件中指明主工程和依赖包的依赖关系之后,就可以在主工程中正常使用依赖包的类和接口了,这种适合于依赖包中有图片资源.so等不能

Android Support Library详细介绍

网上对Android Support Library中各个依赖包介绍的中文资料太少了,结合官方文档和有限的参考资料做了一次总结,有描述得不对的地方还请指正. 一.主工程.依赖包.jar包.android.jar.Android Support Library的关系一个Android工程通常包括主工程和依赖包,依赖包又有两种形式: 一种是单独的工程或者aar:在主工程的配置文件中指明主工程和依赖包的依赖关系之后,就可以在主工程中正常使用依赖包的类和接口了,这种适合于依赖包中有图片资源.so等不能

浏览器兼容问题系列---使IE支持CSS3 Media Quary

兼容是一件很让前端攻城师头疼的事情,笔者今天在做一个Demo的时候就碰到了一个问题(大牛就不要拍砖了,谢谢!) 经常做移动互联网前端的攻城师想必对于css3 media quary已经很熟悉了,但是碰到IE这种非标准内核的浏览器来说就不能接受了, 接下来直接将解决方案吧: 很简单下载js库respond.js引入到你的页面就可以了,但这里需要注意的两件事情是(也是笔者在实际操作的时候碰到的): 1,respond.js引入位置需要在引入media css这个之后,如下代码: <link rel=

css3 media媒体查询器用法总结兼容ie8以下的方法

总结一下响应式设计的核心CSS技术Media(媒体查询器)的用法. http://www.360doc.com/content/14/0704/06/10734150_391862769.shtml 准备工作1:设置Meta标签首先我们在使用Media的时候需要先设置下面这段代码,来兼容移动设备的展示效果: 这段代码的几个参数解释: width = device-width:宽度等于当前设备的宽度 initial-scale:初始的缩放比例(默认设置为1.0) minimum-scale:

让IE6、7、8兼容@media属性

通常做页面适配的时候,经常会用到@media属性,对不同屏幕范围内的元素设置不同的样式.但是@media属性不兼容IE8及IE8以下的浏览器解决方法: 直接在页面中引入respond.src.js即可 /*! Respond.js v1.4.2: min/max-width media query polyfill * Copyright 2014 Scott Jehl * Licensed under MIT * http://j.mp/respondjs */ /*! matchMedia

关于IE8下media query兼容的解决方案探讨

在国内IE8至少还占有20%的市场份额,所以在做网站时,必须得为这部分用户特殊兼容考虑. 一方面IE8上面很多css3定义的标签不能使用,另外一方面javascript的addEventListener不能使用,还有重要的一点就是media query不能使用. 幸运的是,国外respond.js为解决这个棘手的问题提供了比较好的思路,下面就探讨一二. 具体参考 http://mux.alimama.com/posts/686

HTML-HTML5+CSS3权威指南阅读（二、让IE支持HTML5标签及对CSS3 Media Query的兼容）

兼容解决 HTML5是在低版本的浏览器(IE8-)的兼容是有限的,类似很多结构性的标签<header>.<section>.<footer>等在IE8以下不会被识别.有什么方法能实现兼容呢?在高级浏览器能使用上这些标签,增强语义化:而在低级浏览器(包括IE6)上表现不会出错.那就需要引入html5.js这个文件. 如何使用既然是只有IE低版本需要使用,那就需要做个判断. <!--[if lte IE 8]> <script type="

css3 media媒体查询器用法总结（附js兼容方法）

css3 media媒体查询器用法总结标签:class 代码 style html sp src 随着响应式设计模型的诞生,Web网站又要发生翻天腹地的改革浪潮,可能有些人会觉得在国内IE6用户居高不下的情况下,这些新的技术还不会广泛的蔓延下去,那你就错了,如今淘宝,凡客,携程等等公司都已经在大胆的尝试了这项技术,并完美的应用在了自己的网站上了.再不更新知识你就老了.我今天就总结一下响应式设计的核心CSS技术Media(媒体查询器)的用法. 准备工作1:设置Meta标签首

@media 适配兼容

/* 兼容iphone4/4s */ @media (device-height:480px) and (-webkit-min-device-pixel-ratio:2){ } /* 兼容iphone5 */ @media (device-height:568px) and (-webkit-min-device-pixel-ratio:2){ }

ie6 ie7 ie8 ie9兼容问题终极解决方案

放下包袱,解决低版本兼容问题这是一个老生常谈的问题,自然解决这个问题的方案也比较多,下面整理了一些解决方法: 1.强制使用高版本渲染模式. 强制使用Edge模式来解析网页代码 <meta http-equiv="X-UA-Compatible" content="IE=Edge"> 强制使用Chrome浏览器内核(如果安装了) <meta http-equiv="X-UA-Compatible" content="

CSS3与页面布局学习总结（八）——浏览器兼容与前端性能优化

一.浏览器兼容 1.1.概要世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题.不同浏览器其内核亦不尽相同,相同内核的版本不同,相同版本的内核浏览器品牌不一样,各种运行平台还存在差异.屏幕分辨率不一样,大小不一样,比例不一样.兼容性主要考虑三方面: 1).CSS兼容2).JavaScript兼容3).HTML兼容这三类也是前端的主要组成部分,都存在一定的兼容性问题,知己知彼,百战百胜,我们先了解浏览器的发动机—内核. 多年前我们一直为IE6兼容烦恼,为它没少加

兼容当前多浏览器的渐变颜色背景gradient的写法

经常有一些时候需要使用渐变背景,使用长条图片有点太不高大上了,于是自己写了个小例子,兼容多浏览器就要为每一个浏览器写对应的CSS,太低版本的浏览器只能使用图片做背景. 下面是当前五大浏览器对gradient的支持: <div id="gradient"></div> <style type="text/css" media="screen"> #gradient { width: 200px; height:

IE兼容方法

其实我也觉得非常麻烦,开始的时候都用 _XXX:XXX; /* IE6支持 */ *XXX:XXX; /* IE6.IE7支持 */ *+XXX:XXX; /* IE7支持 */ XXX:XXX\9; /* IE6.IE7.IE8支持 */ XXX:XXX\0; /* IE8支持 */ 创建条件样式表,并在HTML中body里添加相应的class类名: <!–[if IE6]–> <!–[if IE7]–> <!–[if IE8]–> <!–[if IE9]–&g

CSS-各种cs样式之浏览器兼容处理方式汇总大全（更新中...）

页面模板 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="description" content="本网站的目的是....." /&

前端页面开发，最低兼容IE 8的多设备跨平台问题解决！

项目要求: 网站能够使用PC.ipad.mobile phone正常访问页面PSD版式宽度分别为1024px和750px 参考资料使用CSS3 Media Queries,其作用就是允许添加表达式用以确定媒体的环境情况,以此来应用不同的样式表.换句话说,其允许我们在不改变内容的情况下,改变页面的布局以精确适应不同的设备. Media Queries的语法如下所示: @media [media_query] media_type and media_feature 使用Media Querie

一种让 IE6/7/8 支持 media query 响应式设计的方法

在不同的浏览器宽度下使用不同的 CSS 声明,常见的方案是使用 media query,但这个方案不支持 IE9 以下浏览器. 国外比较流行的 UI 框架 bootstrap v3 版本中使用 media query 技术实现了栅格布局 ,但要兼容 IE8 的话,( IE6/7 没有中国占比那么高,所以不用兼容)需要引入 Respond.js 的方案. 该方案的原理分以下 4 步: 1.在样式 link 之后,载入 respond.js ,该脚本会获取在他之前出现的 link 节点到一个数组 2

@media 兼容问题

热门专题