我正在开发一个响应式模板并使用CSS媒体查询.但似乎IE7不直接支持媒体查询.所以我寻找解决方案,发现respond.js,
但我不能让它工作.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="css/styles.css" type="text/css" media="screen" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="js/respond.min.js"></script>
</head>
<body>
<!-- ... -->
</body>
</html>
CSS(style.css):
@import "reset.css";
@import "fonts.css";
@import "bootstrap.css";
@import "plugins.css";
@import "ui.css";
@media screen and (max-width: 320px) {
/* css */
}
但是当我@media screen and (max-width: 320px) { }直接在我的HTML中包含它的工作时.那我错过了什么？
我想我在这里感到困惑。由于响应式设计有点绿色，我试图根据网站的查看宽度导入2个样式表中的1个。
但是，使用以下内容时，在Firebug中查看时，两者似乎都下降了。
它是否正确？我究竟做错了什么？
我想要实现的是，如果浏览器宽度小于940px，则拉active.css，如果大于px，则拉full.css
我已经包含了react.js库 https://github.com/scottjehl/Respond
@import url("/inc/Styles/full.css") (min-width: 940px);
@import url("/inc/Styles/responsive.css") (max-width: 940px) and (min-width: 100px);
我有一个小问题,我的css媒体查询被忽略,或主css是.
我正在尝试更改媒体查询中大小字体的值,桌面为75px,移动设备(max-width:320px;)为40px左右.但它不起作用.
我的css媒体查询代码是:
/* Smartphones (portrait) ----------- */
@media only screen and (min-width : 320px) {
h1.site-title {
color: #fff;
font-family: 'Open Sans', sans-serif;
font-size: 40px;
font-weight: 800;
line-height: 1em;
}
}
当我更改媒体查询css中的font-size值时,它会在整个页面中更改.(桌面,平板电脑等)
我做错了什么？:(
谢谢,
干杯
PS:CSS媒体查询是一个单独的文件,添加在html头中,我有这一行:
<meta name="viewport" content="width=device-width">.
我确保CSS文件没有缓存,并且id/class名称是正确的.当我将浏览器缩小到该范围内的大小时,它不会应用CSS.
这是CSS代码:
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px)
{
#body2 .content
{
max-width: 690px;
}
#navWaypoint #header
{
width: 690px;
}
}
我之前没有遇到过这个问题.
我的媒体查询有一个奇怪的问题.它们似乎在我的移动设备上运行得很好,但是当我调整桌面浏览器的大小时,不会应用更改.这使得使用Web检查器/ firebug无法检查我的移动样式.这是我的媒体查询:
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {}
我试图阻止事件的自举响应功能,javascript:print()使我的网页保持在我已经确定的列网格排列,无论像素大小.
我可以在这个答案中重新编译不同的断点,并在打印时提供第二个css文件.
但我不想要提供新的css文件.
我想做这样的事情
@media print and (min-width: 480px) {
.col-xs-12 {
float: none;
width: 100%;
}
.....
}
这是CSS：
@media only screen and (min-width : 971px) and (max-width : 1224px) {
main #titlebox{
height: 300px;
}
}
@media only screen and (min-width : 785px) and (max-width : 970px) {
main #titlebox{
height: 250px;
}
}
@media only screen and (max-width : 784px) {
main #titlebox{
height: 225px;
}
}
问题在于，在调整浏览器大小时，预期不会应用媒体查询。例如，从浏览器非常宽（> 1300px）开始，然后逐渐减小浏览器的宽度，直到元素大约为0时，才会应用第一个媒体查询。1209px宽。我希望它将在宽度变为1224px时立即应用。同样，直到大约955px而不是970px才应用下一个。我已经在chrome和firefox中测试了此行为。
我想要了解哪些可能是针对移动电话(手持设备)和平板电脑的最推荐的css媒体查询.我有以下代码,我想知道是否
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (min-device-width : 768px) {
/*style*/
}
谢谢!
我已经为chrome和mozilla编写了媒体查询css.它在chrome中运行良好.但在mozilla中无效
@media screen and (min-height:650px)
{
#customerspeak .flexslider .slides .customerBackground img {
height: 100vh;
}
#customerspeak .flex-direction-nav a {
margin-top: 37%;
}
#customerspeak .flex-next {
left: 62.5% !important;
}
#customerspeak .flex-prev {
left: 34% !important;
}
@-moz-document url-prefix() {
#customerspeak .flexslider .slides .customerBackground img {
height: 100vh;
}
#customerspeak .flex-direction-nav a {
margin-top: 37%;
}
#customerspeak .flex-next {
left: 62.5% !important;
}
#customerspeak .flex-prev {
left: 34% !important;
}
}
}
.small_only {
display: block;
}
.large_only {
display: none;
}
/* === Media Queries === */
// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) {
.small_only {
display: none;
}
.large_only {
display: block;
}
}<div class="container">
<div class="row">
<div class="col-lg-12 col-xs-12">
<div class="small_only">
<h1>SMALL</h1>
</div>
<div class="large_only">
<h1>This should only be visible in large windows</h1>
</div>
</div>
</div>
</div>问题:无论屏幕有多宽,输出都只包含"SMALL"字样.
我觉得我错过了一些明显的东西,但对于我的生活,我无法弄清楚它是什么.