正文 

当前位置： 首页 > java > java教程

ie8实现媒体查询

shapaozi shapaozi     2023-02-19     489

关键词：

IE8实现媒体查询

IE8下想实现不同分辨率样式的兼容，需要用Css3中的media,
可是IE8不支持@media啊
技术分享图片

翻不出去，那找度娘

果然找到了一个Demo
技术分享图片

测试一下，IE8媒体查询也不是多难技术分享图片

1、下载Respond
2、找到Respond文件中的respond.src.js
3、已测试Demo为例依次创建Index.html、Index.css、IE8Index.css，最后添加respond.src.js
技术分享图片

此时距离成功只差一步了！！！！部署到服务器

(不然你的控制台在ie8下只会报script:拒绝访问)
技术分享图片

部署到服务器，没有？部署到本地的IIS上
为什么要部署呢，因为respond.src.js的缘故，不能使用普通本地的url地址（file://开头）
不会搭建----->教程: 搭建本地IIS服务器
教程不能用？
技术分享图片

4、最后效果
非IE8时效果
技术分享图片
IE8时效果
技术分享图片

PS：要在服务器上运行(未在实际项目中使用，仅供参考)

demo地址

基于 IE8 和 REM 的媒体查询

】基于IE8和REM的媒体查询【英文标题】：IE8andREMbasedMediaQueries【发布时间】：2016-01-0809:11:46【问题描述】：我希望我的媒体查询基于REM，以支持用户进行各种浏览器缩放和/或基本/浏览器字体大小调整。理想情况下到IE8。加载jQuer... 查看详情

bootstrap在ie8下，兼容媒体查询

最近使用bootstrap做网站的时候发现，在ie8下的媒体查询一直失效：后来解决了，做如下记录：1、必须运行在服务器下2、hack条件语法，如下：<!--[iflteie9]><scriptsrc="js/html5shiv.min.js"></script><scriptsrc="js/respond.min.js">&l... 查看详情

IE8：让“nth-child”选择器在媒体查询中工作？

】IE8：让“nth-child”选择器在媒体查询中工作？【英文标题】：IE8:makingthe`nth-child`selectorworkinsidemediaqueries?【发布时间】：2012-11-1507:02:18【问题描述】：在我的网站项目中，我使用媒体查询和nth-child选择器。IE8不支持开箱即用，... 查看详情

IE7、IE8支持css3媒体查询[重复]

】IE7、IE8支持css3媒体查询[重复]【英文标题】：IE7,IE8supportforcss3mediaquery[duplicate]【发布时间】：2013-08-1420:13:18【问题描述】：我试过了：@mediascreenand(max-width:1024px).sidebarwidth:630px;获得IE7和8的修复程序，但它无法正常工作，因为它... 查看详情

媒体查询 Internet Explorer

】媒体查询InternetExplorer【英文标题】：mediaqueriesinternetexplorer【发布时间】：2011-09-1215:51:19【问题描述】：我尝试在我的网站中使用媒体查询。它在Firefox和safari中运行良好，但不适用于IE。有谁知道让媒体查询在IE（InternetExplorer7... 查看详情

解决媒体查询的响应式布局

  众所周知，网页前端开发时兼容IE一直是很头疼的问题。今天接到一个需要响应式布局的问题，主要还要兼容IE8，9。在网上搜索了以下解决方案，现记录如下。 首先，加入代码 <!--[ifltIE9]><scriptsrc="http://css... 查看详情

兼容html5新标签及媒体查询引入插件

<!--以下2个插件是用于在IE8支持HTML5元素和媒体查询的，如果不用可移除--><!--[ifltIE9]> <scriptsrc="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script><scriptsrc="https://oss.maxcdn.com/l 查看详情

如何在 NextJs 中为 Material UI 的媒体查询实现 s-s-r？

】如何在NextJs中为MaterialUI的媒体查询实现s-s-r？【英文标题】：Howtoimplements-s-rforMaterialUI\'smediaqueriesinNextJs?【发布时间】：2020-08-1401:52:27【问题描述】：我无法遵循documentation实现MaterialUI的媒体查询，因为它是为普通的React应用程... 查看详情

媒体查询中的打印

项目中要实现打印特定的文章，所以要隐藏一些元素，当时是用js实现的隐藏，忘记了css3就有这么个媒体查询。<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Document</title><!--<linkrel="stylesheet"t 查看详情

css响应式布局rwd

...弹性网络（百分比定义宽度）2）用于图片和视频的弹性媒体3）媒体查询在布局中，需要注意的点有：1）尽量用min-width/max-width,max-height/min-height代替width,height2)尽量使用百分比，em为单位代替精确值3）采用媒体查询 二、媒体... 查看详情

在媒体查询中更改视口

...准备好，因为我的客户必须获得更多预算。因此，我需要实现一个临时视图，我想用一个仅在智能手机上激活的固定视口来实现它。我使用这种方式设置视口：<metaname="viewport"content="width=device-wid 查看详情

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

...率下，网站页面依然能显示一致，除了通过js来控制，css媒体查询更为方便，而痛点在于ie8不支持。我们可以通过respond.js库来解决，这个插件的原理很简单：将head中所有外部引入的css文件路径取出来存储在一个数组中，遍历数... 查看详情

移动端布局1：媒体查询结合rem实现移动端布局(代码片段)

第一步：先写好重置的样式。直接复制粘贴即可@mediaalland(max-width:320px) html font-size:12px; @mediaalland(min-width:321px)and(max-width:375px) html font-size:14px; @mediaalland(min-width:376px) html 查看详情

divcss自适应

 怎样实现响应式布局？对于这个问题，我们可以通过CSS3中的MediaQuery来实现，即媒介查询。媒体查询让CSS可以更精确作用于不同的媒体类型和同一媒体的不同条件。媒体查询的大部分媒体特性都接受min和max用于表达"大于或等... 查看详情

响应式布局之媒体查询功能

实现响应式布局有很多方法：媒体查询功能：MediaQueries就是其中之一media用来指定特定的媒体类型，例如屏幕（screen）和打印（print）和支持所有媒体介质的all如果要在head部分引用，形式如下： [html] viewplain copy &nb... 查看详情

day10

一、CSS实现响应式布局1、CSS中的MediaQuery（媒介查询）是什么？　　通过不同的媒体类型和条件定义样式表规则。媒体查询让CSS可以更精确作用于不同的媒体类型和同一媒体的不同条件。媒体查询的大部分媒体特性都接受min和max... 查看详情

echarts 媒体查询不适用于 Bootstrap（轮播）

...导网格在其上显示图表。他们工作正常，但是我正在尝试实现响应式媒体查询，但似乎无法使其工作。我使用baseOptions和media选项来定义 查看详情

CSS 网格和媒体查询 [重复]

...】：我目前正在努力让CSS网格与一些媒体查询一起工作以实现更小的屏幕尺寸。我基本上有一个两行三列的网格，在较小的屏幕尺寸下下降到三行两列。我希望它在手机大小的屏幕上下降到一个有6行和一个主列的网格。到目前... 查看详情