我有一个响应式网页,尺寸在750像素以下表现得很好,但之后就会遇到问题。需要大量使用CSS才能使其看起来好看,而且这是一个相当hackish的解决方案。
如果浏览器大小小于750像素,是否有一种方法可以将它们带到具有自己标记、样式等的特定页面?
谢谢, Jordan
@media all and (max-width: 750px) {
/* CSS rules here for screens lower than 750px */
}
@media all and (min-width: 750px) {
/* CSS rules here for screens above 750px */
}
请参阅介绍媒体查询 - 第1部分:什么是媒体查询 - Adobe,媒体查询 - 维基百科,自由的百科全书以及CSS3媒体查询概述 - CSS媒体查询
你可以仅将CSS应用于特定的设备宽度:
@media only screen and (max-width: 767px) {
body { background-color: red; }
}
你可以轻松地显示和隐藏针对某个设备的HTML区域。即使加载时间会受到影响,因为所有设备都加载所有其他设备的标记,但你甚至可以对整个站点执行此操作。
.phone-section { display: none }
@media only screen and (max-width: 767px) {
.phone-section { display: block }
.desktop-section { display: none }
}