Question

在下面的代码示例中，有两个包含桌面和移动样式的多维数据集。例如，在iphone上，立方体应该是绿色的，而在桌面上它应该是（并且是）红色。在我的iPhone纵向视图中我什么都没有，在风景上，它是红色而不是绿色。在iPad上也一样。在Google Chrome开发者工具上，当我选择Apple iPhone 5 Portrait时，它不会在样式中显示媒体查询，就像它没有识别它一样。我做错了什么？

/* for desktop */
@media only screen and (min-width: 400px) and (max-width: 767px) {
	#block2 {width:100px;height:100px;background:red;}	
}
/* for iPhone */
@media only screen and (min-device-width:320px) and (max-device-width: 767) {
	#block2 {width:100px;height:100px;background:green;}	
}
/* for desktop */
@media only screen and (min-width: 960px) and (max-width: 1024px) {
	#block {width:100px;height:100px;background:red;}	
}
/* for iPad */
@media only screen and (min-device-width:768px) and (max-device-width: 1024) {
	#block {width:100px;height:100px;background:green;}	
}

<div id="block"></div>
<div id="block2"></div>

Answer 1

语法错误：

(max-device-width: 767)
(max-device-width: 1024)

到

(max-device-width: 767px)
(max-device-width: 1024px)

Answer 2

尝试这样的事情。

.
├── A
│   └── CMakeLists.txt
├── B
│   └── CMakeLists.txt
└── CMakeLists.txt

更多详情 - CSS-Tricks

媒体查询设备宽度和“常规”宽度不起作用

2 个答案: