1、解决兼容性问题

(1)页面最顶部必须定义：<!DOCTYPE html>

(2)点击：下载 respond.js 文件

(3)引入<script src="respond.js"></script>；respond.js必须在样式表之后引用：

(4)页面必须在服务器环境中运行，直接打开用不了

2、使用css3判断窗口大小设置不同样式：

举个例子：

/*宽度小于500px时；背景为红色*/

@media screen and (max-width:500px){

body{background:red;}

}

/*宽度在500px-800px之间时候；背景为蓝色*/

@media screen and (min-width: 500px) and (max-width: 800px){

body{background:blue;}

}

/*宽度大于800px时；背景为绿色*/

@media screen and (min-width:800px){

body{background:green;}

}

 这里要注意，这里的样式必须是引用的外部样式，直接写在页面里的不可以

可以点击：实例下载，有我做好并测试通过的实例。

出自：http://www.bjishu.com/using-ie-css3htc-make-compatible-response-page

解决@media screen （自适应）IE浏览器不兼容问题的更多相关文章

  1. @media screen 自适应笔记

    在css中使用@media screen 通过检索宽度 对应改变html中class的css属性. 1280分辨率以上(大于1200px) @media screen and (min-width:1 ...

  2. 利用@media screen实现网页布局的自适应

    利用@media screen实现网页布局的自适应 优点:无需插件和手机主题,对移动设备友好,能够适应各种窗口大小.只需在CSS中添加@media screen属性,根据浏览器宽度判断并输出不同的长宽 ...

  3. @media screen解决移动web开发的多分辨率问题

    当今移动设备的发展已经越来越迅速,移动web开发的需求也越来越多多.许多大平台.大门户都纷纷推出了自己的移动web版网站. 随着移动设备飞速的发展,移动产品的屏幕规格越来越多.从几年前的320×240 ...

  4. html自适应布局，@media screen，媒体查询

    html自适应布局,@media screen,媒体查询 自适应代码示例: <!doctype html> <html> <head> <meta chars ...

  5. 使用@media screen解决移动web开发的多分辨率问题

    当今移动设备的发展已经越来越迅速,移动web开发的需求也越来越多多.许多大平台.大门户都纷纷推出了自己的移动web版网站. 随着移动设备飞速的发展,移动产品的屏幕规格越来越多.从几年前的320×240 ...

  6. [转载]利用@media screen实现网页布局的自适应,@media screen and

    开始研究响应式web设计,CSS3 Media Queries是入门.Media Queries,其作用就是允许添加表达式用以确定媒体的环境情况,以此来应用不同的样式表.换句话说,其允许我们在不改变内 ...

  7. 利用@media screen实现网页布局的自适应,@media screen and

    开始研究响应式web设计,CSS3 Media Queries是入门.Media Queries,其作用就是允许添加表达式用以确定媒体的环境情况,以此来应用不同的样式表.换句话说,其允许我们在不改变内 ...

  8. jsp关闭或刷新浏览器（解决浏览器不兼容），请求后台onbeforeunload、onunload

    jsp关闭或刷新浏览器(解决浏览器不兼容),请求后台  onbeforeunload.onunload 1.看代码: function test(e) { var json = "退出,清理 ...

  9. ie浏览器不兼容css媒体查询的解决办法

    有些页面布局复杂,在不同分辨率下表现需要一致,这时需要用媒体查询根据不同分辨率进行百分比定位(不能用像素定位),如: @media screen and (max-width: 1600px) { . ...

随机推荐

  1. 【javascript 变量和作用域】

    今天学习了javascript 的变量和作用域的基本知识,对于以前在开发中遇到的一些不懂的小问题也有了系统的认识,收获还是比较多的. [基本类型和引用类型] ECMAScript 变量可能包含两种不同 ...

  2. 【转】【Top 100 Best Blogs for iOS Developers】

    原文地址:http://www.softwarehow.com/best-blogs-for-ios-developers/ (by JP Zhang | Last updated: Apr 5, 2 ...

  3. Oracle死锁只会回滚跟死锁有关的那条SQL，而不会回滚整个事务

    数据库检测到死锁后,只会回滚跟死锁有关的某条语句,而不会回滚整个事务. 创建测试环境:SQL> create table test1(id int,name char(1)); 表已创建. SQ ...

  4. arm-linux-gcc编译器定义寄存器变量

    uboot代码中有这么一句话“#define DECLARE_GLOBAL_DATA_PTR     register volatile gd_t *gd asm ("r8")”, ...

  5. Python的数据类型总结

    原地可变类型和不可变类型 原地不可变类型又叫可哈希(hashable)类型,原地可变类型又叫不可哈希类型. 原地不可变类型: 数字类型:int, float, decimal.Decimal, fra ...

  6. bzoj 3851: 2048 dp优化

    3851: 2048 Time Limit: 2 Sec  Memory Limit: 64 MBSubmit: 22  Solved: 9[Submit][Status] Description T ...

  7. Standford CoreNLP--Sentiment Analysis初探

    Stanford CoreNLP功能之一是Sentiment Analysis(情感分析),可以标识出语句的正面或者负面情绪,包括:Positive,Neutral,Negative三个值. 运行有两 ...

  8. 利用TEA算法进行数据加密

    TEA(Tiny Encryption Algorithm)是一种小型的对称加密解密算法,最初是由剑桥计算机实验室的 David Wheeler 和 Roger Needham 在 1994 年设计. ...

  9. WCF 托管在IIS中遇到Http的错误

    IIS8中部署WCF服务出错:HTTP 错误 404.3 - Not Found http://www.cnblogs.com/xwgli/archive/2013/03/15/2961022.htm ...

  10. bzoj1202

    很久以前写的,忘补解题报告了首先似乎dfs就可以了吧?但还有更高大上的做法其实这东西就是告诉sum[y]-sum[x-1]=z然后给出一堆看成不成立可以用并查集,维护每个点到father点的差即可 . ...