标签: media-queries

YUI Compressor有一个已知的错误,其中一些媒体查询,包括那些用于为iOS和Android设备(例如@media screen and (max-device-width: 480px) {...})提供样式的查询,在压缩时会被破坏,因为and删除了开括号之间的空格.

• http://yuilibrary.com/projects/yuicompressor/ticket/2527991

可从主页(2.4.2)下载的最新版本仍存在此问题.

• http://yuilibrary.com/downloads/#yuicompressor

是否有修复此问题的更新版本？

我正在设计一个在移动设备上看起来与众不同的响应式网站.我的css中有三个单独的媒体查询以及视网膜显示的查询.

/** 768PX IPAD PORTRAIT **/
@media screen and (max-width: 768px) {}

/** 480PX IPHONE LANDSCAPE **/
@media screen and (max-width: 480px) {}

/** 320PX PORTRAIT **/
@media screen and (max-width: 320px) {}

/**  RETINA IMAGES **/
@media all and (-webkit-min-device-pixel-ratio: 2) {}

当iPad处于纵向模式时,它将获得移动版本,但是当它处于横向模式时,它将获得该网站的常规版本.

我的问题是这个,现在使用"新iPad"和视网膜显示器,某些视网膜图像没有正确对齐视网膜iPad版本.全球视网膜css正在推翻普通的CSS,我认为这应该是.

例如,在移动版本中,我有一个以屏幕为中心的背景图像,但在常规网站上,它左对齐.

有人知道只在CSS中针对iPad定位视网膜图像的方法吗？

谢谢

编辑:这是我正在玩的东西,但它似乎不起作用:

@media screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio: 2) {}

这可能很难解释.是否有类似jQuery砌体的类似插件能够检测预定义网格中的空间并移动和定位适合此空间的元素？

由于所有其他解释我的问题的方法都会变得复杂,我画了一个简单的图像来表明我的意思.

注意:这是一个流畅的响应式网页设计.

所以我的dom-order是1,2,3.然而,当我在一定范围内折叠我的布局时,media-query我想动态地切换dom顺序或以不同方式定位元素.就像你在我的样本中看到的一样.

我知道有像jQuery Masonry或jQuery Isotope这样的东西,但这两个插件都没有填满网格的所有空白区域.看看这个同位素截图...

缺少一个元素.当然,在大多数情况下,这是您希望保持元素顺序的内容.在我的情况下,我不关心订单,我只想填补所有空间和空白.因此,就像你在上面看到我的草图一样,item-nr-3应该向上移动以适应空隙(因为它适合).如果有另一个item相同的尺寸,它将适合下面的间隙item-nr-3.

这有可能吗？是否有一些jQuery插件可以做到这一点？或者你还有其他的idaes？

一些额外的信息:items我正在谈论 的和盒子都设置为box-sizing:border-box所以我不必担心填充或边距.

更新: 以下是问题的实时示例:http://jsfiddle.net/r79u2/1/

我一直在使用一些库(包括我自己的)来根据我在CSS文件中概述的媒体查询来动态加载资源.例如:

在CSS中:

  @media screen and (max-width: 480px) {
    .foo {
      display: none;
    }
  }

并使用资产加载器; require.js,modernizr.js等或使用window.matchMedia和相关的addListener()函数:

  if (function("screen and (max-width: 480px)")){
    // Load several files
    load(['mobile.js','mobile.css']);
  }

将它们声明两次是笨拙/愚蠢的,据我所知,所有JS帮助程序库和资产加载程序都要求您重复媒体查询,而不是从JS/DOM 以编程方式查找它们.

所以,我一直在探索通过编程方式访问这些值的能力document.stylesheets,但我不确定它们是否可访问,并且似乎很少有文档表明它们是.

我得到的最远的是寻找CSSMediaRule和使用console.dir(document.stylesheets)其他人来探索样式表对象.

但是document.stylesheets在CSS中使用的实际媒体查询规则中没有引用(内部) - 只有作为媒体查询结果应用的类...我试图以编程方式找到的是:

"屏幕和(最大宽度:480px)"

有没有办法通过JavaScript/DOM 访问这样的CSS媒体查询规则？

我正在努力优化响应式网站,Safari(桌面和移动设备)似乎完全忽略了某个点以下的媒体查询.我有以下代码:

@media screen and (max-width: 767px){
    /* Safari responds to css here */
}
@media screen and (max-width: 640px){
    /* css here is ignored by Safari */
}

Firefox和Chrome都做出了适当的响应.有没有人对正在发生的事情有任何想法？

你可以在这里看到这个网站:http://kgillingham.webfactional.com.应该发生什么(并且适用于FF和Chrome)是因为站点变得小于640px,滑块中的标题字体应该变得更小.

编辑:该网站现已更新为使用javascript在大小小于640px时添加类.该类始终使用较小的字体大小.这意味着它现在按预期工作,但我宁愿使用CSS媒体查询而不是javascript,所以我仍然希望看到一个解决方案.

我是CSS和这个论坛的新手.但是我一直在做一个小项目,我希望我的网站中的图像在浏览器调整大小时完全改变.

我一直在使用媒体查询？但我似乎无法做对.任何想法/提示？

我有一个Web应用程序,在Safari中呈现时看起来很好,但浏览器不遵守打印介质查询.在Chrome中,整个可打印区域看起来很好,但在Safari中,它似乎只是可见内容的一些变体.

当向下滚动页面时,页眉或顶部区域被切断,当在页面上打印较高时,底部被切断.

我已经尝试了以下打印媒体查询(没有效果) -

1. 设置一个 min-height
2. 设置height容器上值的任何变化
3. 缩小和打印
4. 改变分辨率/比例

似乎没有任何效果.

与Chrome不同,我无法找到调试原因的方法,也无法自行调试打印样式.

注意 - 我正在使用Bootstrap作为样式,因此有容器,行,跨度等......但即使完全删除它们,并且它自己的行上的所有内容也没有区别,内容的相同"高度"在打印时显示.

最近我一直在玩CSS Media Queries,因为这是让我的网站适应各种屏幕尺寸的好方法.我打算将它们实现到实时版本中.

我的问题是:布局更改时是否有任何建议的分辨率值？

我的网站上有照片背景background-size:cover.它在很大程度上起作用,但在我的Galaxy S3上以纵向模式留下了一个奇怪的~30px白色空间.

我附上了截图.1px青色线用于说明整个屏幕.似乎背景在社交媒体之后就停止了ul.

我测试了这个,通过删除ul它自己附加到标语文本底部的背景.

此外,这是我的CSS移动肖像视图:

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

.logo {
    position: relative;
    background-size:70%;
    -webkit-background-size: 70%;
    -moz-background-size: 70%;
    -o-background-size: 70%;
    margin-top: 30px;
}   

h1 {
    margin-top: -25px;
    font-size: 21px;
    line-height: 21px;
    margin-bottom: 15px;
}

h2 {
    font-size: 35px;
    line-height: 35px;
}

.footer_mobile {
    display: block;
    margin-top: 20px;
    margin-bottom: 0px;
}

li {
    display: block;
    font-size: 1.3em;
}

这曾经不会发生,但我想我在尝试解决另一个问题时偶然发现了它.

Helo伙计们,我想修改导航栏以便崩溃@screen-md :992px;.我已修改navbar.less,但仍然无法工作,我不知道该怎么做.

那么如何修改@grid-float-breakpoint变量以便在自定义媒体查询大小上折叠该菜单？

小提琴: