CSS仅使用CSS为特定的监视器分辨率应用特定规则是可行的吗？ [英] CSS Applying specific rule for a specific monitor resolution with only CSS is posible?

问题描述

我的设计宽度为; 1010px 此设计有两个箭头用于幻灯片左和右并且开箱即用（宽度：1010px div容器），处于绝对位置。

I have a design with a width;1010px this design have two Arrow for a slideshow "left" and "right" and are out of the box (width:1010px div container), in an absolute position.

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

所以我想知道是否可以为特定监视器声明规则分辨率，实际上对于ipad分辨率1024x728，我想将我的箭头放在1010px容器内，当显示器是1024x728时，我知道如何用原型，jquery，javascript等解决方案做到这一点，但我不知道它是否可行只用css方法解决这个问题。

so I would like to know if it's posible to declare a rule for specific monitor resolution, actually for ipad resolution 1024x728, I would like to position my arrows inside of the 1010px container when the monitor is 1024x728, I know how to do this with prototype, jquery, javascript alike solutions, But I don't know if it's posible to resolve this problem with only css approach.

提前谢谢

推荐答案

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

Use a CSS3 Media Query to apply conditional styles to devices with a specific size:

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

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

You can also detect the orientation of the device (Portrait vs. Landscape) by using the 'orientation' media feature, which can be combined like so:

@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 {
        ...
    }
}

这篇关于CSS仅使用CSS为特定的监视器分辨率应用特定规则是可行的吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！