Question

我有一个设计width;1010px这个设计有两个箭头用于幻灯片“左”和“右”，并且是开箱即用的（width:1010px div容器），处于绝对位置。

.showcase-arrow-next
{
    right: -40px;
    top:150px;
    background-position: -70px 0px;
}

所以我想知道是否可以声明特定显示器分辨率的规则，实际上对于ipad分辨率1024x728，当显示器是1024x728时，我想将我的箭头放在1010px容器内，我知道该怎么做这与原型，jquery，javascript类似的解决方案，但我不知道是否有可能只用css方法解决这个问题。

提前致谢

Answer 1

使用CSS3 Media Query将条件样式应用于具有特定大小的设备：

<style>
    @media screen and (min-device-width: 768px) and (max-device-width: 1024px) {   
        .showcase-arrow-next {
            right: -40px;
            top: 150px;
        }
    }    
</style>

您还可以使用＆＃39; orientation＆＃39;来检测设备的方向（纵向与横向）。媒体功能，可以这样组合：

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px)
    and (orientation: portrait) {
    /* iPad Portrait Mode */

    .showcase-arrow-next {
        ...
    }
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px)
    and (orientation: landscape) {
    /* iPad Landscape Mode */

    .showcase-arrow-next {
        ...
    }
}

Answer 2

是的，您可以在网上搜索“响应式网页设计”并阅读Media queries。

这样的东西就是你要找的东西;

@media handheld and (width: 1024px) {
  // add your CSS rules here
}

CSS可以仅使用CSS为特定的监视器分辨率应用特定规则吗？

2 个答案: