Question

这是我们建立的网站：

http://reenawadia.com/subdomains/staging/

在宽度为1920的桌面上，它看起来很精致 - 带有blurb的白色框，是方形的，我们喜欢它的样子。然而在表面专业4，分辨率2736px宽度（是这个视网膜？）带有blurb的白色盒子根本没有出现！这是我曾经尝试过的CSS代码，它在桌面和表面专业4上看起来相似：

/* Large screens ----------- 
@media screen and (min-width: 1910px) */
@media only screen and (min-device-width : 1910px) and (max-device-width : 1940px) {
/* WHITEBOX ELEMENTS - NEEDS TO BE RESPONSIVE */
#socialz {
    padding-top: 20px;
}
#aboutme {
    padding-top: 30px;
}
#homebg {
    background-color: rgba(255,255,255,0.85);
    margin-right: 1050px;
    margin-top: 200px;
    padding: 30px 25px 20px 15px;
}
#footer-bottom {
   display:none;
}

}


/* Retina screens ----------- */
@media only screen and (min-device-width : 2700px) and (max-device-width : 2800px) {
/* WHITEBOX ELEMENTS - NEEDS TO BE RESPONSIVE */
#socialz {
    padding-top: 20px;
}
#aboutme {
    padding-top: 30px;
}
#homebg {
    background-color: #ff0;
    margin-right: 700px;
    margin-top: 200px;
    padding: 30px 25px 20px 15px;
}
#footer-bottom {
   display:none;
}

}

如何在桌面和Surface Pro 4 / retina显示屏上使白框看起来不错？

另外 - 如何确保对平板电脑和移动设备的CSS应用正确的媒体查询？

仅供参考这是一个wordpress DIVI版本，我使用简单的CSS插件来覆盖CSS，谢谢！

响应式css媒体查询中断 - 桌面和视网膜屏幕

0 个答案: