标签: media-queries

我在一个项目上使用Twitter Bootstrap.除了默认的bootstrap样式,我还添加了一些自己的样式

//My styles
@media (max-width: 767px)
{
    //CSS here
}

当视口的宽度小于767px时,我也使用jQuery来更改页面上某些元素的顺序.

$(document).load($(window).bind("resize", checkPosition));

function checkPosition()
{
    if($(window).width() < 767)
    {
        $("#body-container .main-content").remove().insertBefore($("#body-container .left-sidebar"));
    } else {
        $("#body-container .main-content").remove().insertAfter($("#body-container .left-sidebar"));
    }
}

我遇到的问题是$(window).width()由CSS计算的宽度和CSS计算的宽度似乎不相同.当$(window).width()返回767时,css计算出视口宽度为751,因此似乎有16px不同.

有谁知道造成这种情况的原因以及如何解决问题？人们已经建议不考虑滚动条的宽度,使用$(window).innerWidth() < 751是要走的路.但理想情况下,我想找到一个计算滚动条宽度的解决方案,这与我的媒体查询一致(例如,两个条件都在检查值767).因为当然并非所有浏览器的滚动条宽度都是16px？

IE8不支持以下CSS媒体查询:

@import url("desktop.css") screen and (min-width: 768px);

如果没有,那么另一种写作方式是什么？这在Firefox中运行良好.

以下代码有任何问题吗？

@import url("desktop.css") screen; 
@import url("ipad.css") only screen and (device-width:768px);

我是这家公司的新人,我们的产品使用了数英里的css.我正在尝试为我们的应用程序制作一个可打印的样式表,但我在@media print中遇到了背景色问题...

    @media print {
      #header{display:none;}
      #adwrapper{display:none;}
      td {
        border-bottom: solid; 
        border-right: solid; 
        background-color: #c0c0c0;
      }
    }

其他一切工作,我可以修改边框等,但背景颜色将不会在打印中出现.现在我明白你们可能无法回答我的问题并提供更多细节,我只是好奇,如果有人之前有这个问题,或类似的东西.

在styles.css中,我使用的是媒体查询,两者都使用以下变体:

/*--[ Normal CSS styles ]----------------------------------*/

@media only screen and (max-width: 767px) {

    /*--[ Mobile styles go here]---------------------------*/
}

当我缩小窗口时,网站会在常规浏览器(Safari,Firefox)中调整我想要的布局,但是,手机上根本不会显示移动布局.相反,我只看到默认的CSS.

谁能指出我正确的方向？

在http://getbootstrap.com/css/上它说:

我们使用以下媒体查询在网格系统中创建关键断点.

超小型设备(电话,最高480px):无媒体查询,因为这是Bootstrap中的默认设置

小型设备(平板电脑,768像素及以上):@ media(最小宽度:@ screen-sm){...}

中型设备(台式机,992px及以上):@ media(最小宽度:@ screen-md){...}

大型设备(大型台式机,1200px及以上):@ media(最小宽度:@ screen-lg){...}

我们是否应该能够在我们的媒体查询中使用@ screen-sm,@ screen-md和@ screen-lg名称？因为它对我不起作用.在它工作之前,我必须使用像@media(min-width:768px){...}这样的像素测量.难道我做错了什么？

另外,对于超小型设备而言,480px的参考是错字吗？不应该说高达767px？

我正在使用CSS媒体查询处理响应式网站.

以下是设备的良好组织吗？电话,Ipad(风景和肖像),桌面和笔记本电脑,大屏幕

什么是常见的媒体查询断点值？

我打算使用以下断点:

• 320:智能手机肖像
• 481:智能手机景观
• 641或768 ???:IPad Portrait ???
• 961:iPad风景/小笔记本电脑???
• 1025:台式机和笔记本电脑
• 1281:宽屏幕

你怎么看？我有几个疑问？点.

在JavaScript中,可以使用以下方法检测方向模式:

if (window.innerHeight > window.innerWidth) {
    portrait = true;
} else {
    portrait = false;
}

但是,有没有办法只使用CSS检测方向？

例如.就像是:

@media only screen and (width > height) { ... }

iPhone 5有一个更长的屏幕,它没有捕捉我的网站的移动视图.什么是iPhone 5的新响应式设计查询,我可以与现有的iPhone查询结合使用吗？

我目前的媒体查询是这样的:

@media only screen and (max-device-width: 480px) {}

我正在尝试使用CSS3媒体查询来创建一个只在宽度大于400px且小于900px时出现的类.我知道这可能非常简单,我遗漏了一些明显的东西,但我无法弄明白.我想出的是以下代码,感谢任何帮助.

@media (max-width:400px) and (min-width:900px) {
    .class {
        display: none;
    }
}

使用媒体查询时最安全的方法是什么,以便在不在触摸屏设备上时发生某些事情？如果没有办法,你建议使用像!window.TouchModernizr 这样的JavaScript解决方案吗？