解决@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: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浏览器不兼容问题的更多相关文章
- @media screen 自适应笔记
在css中使用@media screen 通过检索宽度 对应改变html中class的css属性. 1280分辨率以上(大于1200px) @media screen and (min-width:1 ...
- 利用@media screen实现网页布局的自适应
利用@media screen实现网页布局的自适应 优点:无需插件和手机主题,对移动设备友好,能够适应各种窗口大小.只需在CSS中添加@media screen属性,根据浏览器宽度判断并输出不同的长宽 ...
- @media screen解决移动web开发的多分辨率问题
当今移动设备的发展已经越来越迅速,移动web开发的需求也越来越多多.许多大平台.大门户都纷纷推出了自己的移动web版网站. 随着移动设备飞速的发展,移动产品的屏幕规格越来越多.从几年前的320×240 ...
- html自适应布局,@media screen,媒体查询
html自适应布局,@media screen,媒体查询 自适应代码示例: <!doctype html> <html> <head> <meta chars ...
- 使用@media screen解决移动web开发的多分辨率问题
当今移动设备的发展已经越来越迅速,移动web开发的需求也越来越多多.许多大平台.大门户都纷纷推出了自己的移动web版网站. 随着移动设备飞速的发展,移动产品的屏幕规格越来越多.从几年前的320×240 ...
- [转载]利用@media screen实现网页布局的自适应,@media screen and
开始研究响应式web设计,CSS3 Media Queries是入门.Media Queries,其作用就是允许添加表达式用以确定媒体的环境情况,以此来应用不同的样式表.换句话说,其允许我们在不改变内 ...
- 利用@media screen实现网页布局的自适应,@media screen and
开始研究响应式web设计,CSS3 Media Queries是入门.Media Queries,其作用就是允许添加表达式用以确定媒体的环境情况,以此来应用不同的样式表.换句话说,其允许我们在不改变内 ...
- jsp关闭或刷新浏览器(解决浏览器不兼容),请求后台onbeforeunload、onunload
jsp关闭或刷新浏览器(解决浏览器不兼容),请求后台 onbeforeunload.onunload 1.看代码: function test(e) { var json = "退出,清理 ...
- ie浏览器不兼容css媒体查询的解决办法
有些页面布局复杂,在不同分辨率下表现需要一致,这时需要用媒体查询根据不同分辨率进行百分比定位(不能用像素定位),如: @media screen and (max-width: 1600px) { . ...
随机推荐
- 快速设置IP的脚本
@echo off cls ::set NAME="本地连接" set NAME="无线网络连接" set IP=192.168.1.55 set MASK=2 ...
- Hadoop MapReduce Next Generation - Setting up a Single Node Cluster
Hadoop MapReduce Next Generation - Setting up a Single Node Cluster. Purpose This document describes ...
- 用Python和Django实现多用户博客系统(二)——UUBlog
这次又更新了一大部分功能,这次以app的形式来开发. 增加博客分类功能:博客关注.推荐功能(ajax实现) 增加二级频道功能 更多功能看截图及源码,现在还不完善,大家先将就着看.如果大家有哪些功能觉的 ...
- C++ 11 笔记 (二) : for循环
首先肯定的是,我不是标题党.. C++11的for循环确实有跟C++98不一样的地方,还是先上代码: , , , , }; for (int x : test_arr) { std::cout < ...
- Android动画总结#补间动画(Tween Animation/View Animation) #帧动画(Frame Animation/Drawable Animation)#属性动画(PropertyAnimation)
1.共有三种动画,英文名字多种叫法如下 第一种动画:补间动画(Tween Animation/View Animation) 四个:RotateAnimation旋转. AlphaAnimation透 ...
- layer.js:2 Uncaught TypeError: Cannot read property 'extend' of undefined
在引用layer.js插件进行前端编程的时候,如果报这个错,解决办法只需: 把layer的引用放在有冲突的js库前面就行了
- eclipse+maven搭建cxf webservice 完整例子
开发环境是eclipse , maven. 在开发java webservice时,有两个比较流行的框架:axis2和cxf.cxf可以无缝的和spring集成,而axis2需要打包成aar文件,在t ...
- 转:十八、java中this的用法
http://blog.csdn.net/liujun13579/article/details/7732443 我知道很多朋友都和我一样:在JAVA程序中似乎经常见到“this”,自己也偶尔用到它, ...
- XP中IIS“HTTP 500 - 内部服务器错误”解决方法
我先把主要过程叙述一下,叙述完有每个问题的具体操作方法. 今天我在XP上安装IIS,运行网站出现"HTTP 500 - 内部服务器错误". 打开HTML没有问题,打开ASP文件时就 ...
- linux上TCP connection timeout的原因查找
linux上TCP connection timeout的原因查找 好久没有写文章了, 今天解决了一个网络连接超时的问题, 记录以备查看. 最近在线上nginx经常出现输出connection tim ...