如果浏览器支持CSS3媒体查询,如何通过JavaScript检测？
如果浏览器支持CSS3渐变,如何通过JavaScript检测？
谢谢.
媒体查询和响应式设计全新,我陷入了第一道障碍.
我有以下内容:
@media only screen and (max-width: 100px) {
#wrap {
background: #F00;
}
}
@media only screen and (max-width: 500px) {
#wrap {
background: #224466;
}
}
并且只有最大宽度:500px可以工作,因为当我缩小屏幕时它会变为第一种颜色,但是当我将其进一步降低到100px以下时,没有其他事情发生.
我哪里失败了？
谢谢
解:
对于有同样问题的其他人来说,这是Sean Vieira提供的答案.
级联仍然适用于活动媒体查询,因此交换它们可以解决问题)我也将其从100px增加,正如Roy Stanfield所建议的那样,因为桌面浏览器可能不会那么小.
@media only screen and (max-width: 800px) {
#wrap {
background: #224466;
}
.entry-title {
font-size: 2em;
}
}
@media only screen and (max-width: 400px) {
#wrap {
background: #F00;
}
.entry-title {
font-size: 1em;
}
}
我一直在为这项新技术(响应设计)工作,我讨厌我不知道答案的问题,我感到沮丧:/
这是我的代码:http://jsbin.com/ejadej/1
使用最新版本的Chrome,我看到该网站应该如何通过我的代码,而Firefox不会阅读此媒体查询
@media screen and(min-width: 960px) {
#php-info-title {
background-color: #322E2C;
position: absolute;
left:100px;
bottom: 0px;
color:white;
z-index: 0;
max-width: 300px;
}
}
它只是忽略它(如果我删除媒体查询它运作良好,但我不想这样做).
奇怪的是,通过上面写的其他媒体查询,Firefox运行良好.
Firefox发生了什么？
谢谢你的帮助.
我正在使用我的第一个响应式网站而且我完全处于停顿状态,我不能为我的生活找出如何使用这些媒体查询而不是......
这是我的...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>Responsive Layout Test</title>
<!-- Media Query 1 -->
<link href="mobile.css" rel="stylesheet" type="text/css" media="screen (max-width:480px)" />
</head>
<body>
<!-- Container -->
<div id="container">
<!-- End Container -->
<!-- Header -->
<div id="header">
<!-- Logo -->
<div id="logo">
<a href="#"><img src="images/TalonLogo.png" alt="TalonLogo" /></a>
</div>
<!-- Nav bar -->
<div id="nav">
<ul>
<li>
<a href="#">Test</a>
</li>
<li>
<a href="#">Test</a>
</li> …我试图使用不同的CSS样式表用于不同的布局(正如你已经从标题中猜到的那样),但遗憾的是没有任何工作.
我试着加载CSS文件
<link rel="stylesheet" href="css/medium-main.css" type="text/css" media="screen and (max-width: 800px)" />
在meta标签中我也尝试过使用
@media (min-width: 401px) and (max-width: 800px) {
.page{max-width:730px; margin:0 auto; display: block; height:850px; float:left; }
}
在主css文件中,但不会发生任何更改.
这是我的标题的样子:
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/image-slides.css" type="text/css">
<link rel="stylesheet" href="css/jquery.mCustomScrollbar.css" type="text/css" />
<link rel="stylesheet" href="css/main.css" type="text/css" />
<link rel="stylesheet" href="css/medium-main.css" type="text/css" media="screen and (max-width: 800px)" />
我想要改变的CSS属性是一个简单的div的宽度,所以当我调整浏览器大小时没有任何反应.
我的代码出了什么问题？
我只是想在我的朋友/家人周围发送一个小小的圣诞节电子邮件,我已经建立了它以完全响应等我一如既往的方式.然而,因为它只是为朋友,我不会通过MailChimp发送它通常发送一切对我来说没有问题.
我尝试发送它的方法是打开index.html文件,选择全部,复制,然后粘贴到Gmail.这对我来说一直很好,并且确实有效.然而,这是我尝试以这种方式发送的第一封响应式电子邮件,而且似乎媒体查询不会被这种方式带来,至少在我刚刚做过的gmail - > hotmail测试中没有(调整窗口等等)什么都不做,只显示桌面版本).
是否有更好的方式来发送已构建的HTML电子邮件,而不仅仅是在Gmail中复制/粘贴？
正如我在标题中提到的那样 - chrome并未接受媒体查询.例如:
@media only screen and (min-width: 481px) and (max-width: 784px)
@media (min-width: 481px) and (max-width: 784px)
如果我只留下一个宽度属性,它可以工作:
@media only screen and (min-width: 481px)
所有其他浏览器都可以选择.你有没有人也来过这个问题,可以帮助我走上正轨吗？
编辑
我使用的是最新版本的chrome(版本32.0.1700.76 m)
asp.net google-chrome css3 media-queries bundling-and-minification
我有一个HTML文档,它是响应式的.
我想让它反应迟钝.我怎样才能以最有效,最快捷的方式做到这一点？
我试图给min-width到html和body; 但是一些对象仍然响应窗口大小.
我不是jQuery Expert，但是我有一个带有视频标头的网站，问题是，如果从智能手机/平板电脑查看，我需要删除包含视频标签的div。
我怎样才能做到这一点？我敢肯定，这很简单
我试图让文本和h1标签从白色变为黑色.我正在尝试使用max-height媒体查询,但我没有改变.
h1 {
position: fixed;
width: 100%;
text-align: center;
color: #eee;
font-size: 4em;
background-color: hsla(281, 100%, 7%, 0.3);
height: 100%;
}
@media and(max-height: 400px) {
h1 {
color: #222222;
}
}<h1>text<h1>