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. 数据库MySQL与xls文件的互导

    最近的一个项目需要将xls表导入到MySQL数据库中和将MySQL数据表导出到xls表中,在网上搜了很多资料,经过多次尝试终于实现了功能,废话不多说,在这粘贴出代码,希望可以帮到需要的朋友. 一.将. ...

  2. TDirectory.Delete 创建删除目录简单示例

    使用函数: 1.System.IOUtils.TDirectory.CreateDirectory//创建目录 2.System.IOUtils.TDirectory.Exists        // ...

  3. ios8.1.2耗电情况严重的解决方法

    打开cydia,搜索ifile(威锋源,版本2.1.0-1).打开ifile,进入路径/Applications.里面有许多程序文件,选择适当的进行禁用(ifile可以禁用程序的活动而不完全删除它,这 ...

  4. [About me] 关于Alima博主

    大家好,欢迎来到我的博客,我是博主Alima. 关于我,一个从岛国工作刚刚失望回国的90后男孩子,被日企伤的很难过. 迫切的想改变现在的一切,想换个城市换个工作方向,重新开始. 如果你,觉得我的博客写 ...

  5. ASP.NET 共用类库

    using System; using System.Collections.Generic; using System.Text; using System.Web; using System.We ...

  6. nginx 多站点配置方法

    关于nginx的多站设置,其实和apache很相似哒. 假设我们已经有两个域名,分别是:www.websuitA.com和www.websuitB.com.并且这两个域名已经映射给了IP为192.16 ...

  7. 三菱plc编程电缆通讯端口设置方法(转载)

    三菱plc编程电缆通讯端口如何设置?三菱plc编程电缆通讯端口设置方法 时间:2015-10-21 05:09:20编辑:电工栏目:三菱plc 导读:三菱plc编程电缆通讯端口的设置方法,三菱plc上 ...

  8. ubuntu修改grub2

    转自修改系统启动项 grub2配置的方法 ubuntu 在早期的Ubuntu中,使用Grub作为系统的启动引导程序,想修改系统启动项非常简单,只要用gedit打开系统菜单设定文件( sudo gedi ...

  9. Win7新建ftp快捷方式（原XP网上邻居中客户端图标）

      2014-6-2 XP逐渐隐退,新机器一般都是Win7或者Win8了.有很多朋友反映在这两个新系统中找不到类似XP网上邻居中的ftp链接图标.故稍微研究了下,以Win7为例,总结如下. 1.骨灰级 ...

  10. ARP 实现

    ARP 实现 现在我们介绍一下arp的实现,内核版本2.6.24. [数据结构] 协议栈通过ARP协议获取到的网络上邻居主机的IP地址与MAC地址的对应关 系都会保存在这个表中,以备下次与邻居通讯时使 ...