我试图为iphone 5设置媒体查询,为iphone 6设置不同的媒体查询。然而,出于某种原因,我的查询似乎正在重叠:
Iphone 6
@media only screen
and (min-device-width : 375px)
and (max-device-width : 667px)
and (orientation : portrait) { /* STYLES GO HERE */ }
Iphone 5
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
我在一个响应式网站上工作,我的客户希望将某些样式应用于768px的桌面,但不适用于该大小的平板电脑。我已经尝试了多种媒体查询,但我只能让Firefox配合。Chrome、Safari和IE都忽略了媒体查询。这是我尝试过的。
@media only screen and (min-width: 768px), not (min-device-width: 768px) and (max-device-width: 1024px) {
/* styles for desktop only here */
}
我认为这与"not“运算符有关,但我看不出我做错了什么。值得一提的是,
第n-of-type不是在媒体查询内部工作,而是在IE8中同一css文件的媒体查询之外工作。
<script src="http://css3-mediaqueries-js.googlecode.com/files/css3-mediaqueries.js" ></script>
和css:
.j-container:nth-of-type(1), .j-container:nth-of-type(3) {
background-color: #eee;
}/* It is working */
@media screen and (max-w
我有一个有1200 x 200的图像。在这个图像的中心,我有一个带有500 x 200 is 的空间,这是完整图像的主要内容。在这张图片的每一边,我都有一个额外的内容。注:它在一个图像上。
如果窗口宽度减少了,那么首先它应该消耗图像的附加内容,但是要裁剪它,保持图像的高度不变。但是如果我缩小了主内容宽度下面的窗口宽度(此时,所有额外的内容都被切断了),那么现在图像应该按比例调整大小,影响高度。
我的怀疑:
是否只有CSS才能做到这一点?
如果没有,有一些JS库可以这样做吗?
如果不是,我应该如何构造HTML、CSS和JS来实现它呢?
--这是一个带有全宽度的示例横幅:注释