示例调整：

Question

很好奇为什么“一种媒体大小”会受到更大的“更大媒体大小”的影响？我有更多的代码，但是除了这两个以外，还有其他地方可以工作。

@media only screen and (max-device-width: 360px){
	.contact_center_image{
		position: relative;
		margin-left: 20%;
		bottom: 50px;		
	}
	.image_size{
		width: 400px;
		height: 300px;
	}
}



@media only screen and (max-device-width: 1024px){
	.contact_center_image{
		position: relative;
		margin-left: 23%;
		bottom: 50px;		
	}
	.image_size{
		width: 1000px;
		height: 700px;
	}
}

<div class="contact_center_image">
			<img src="https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="Image" class="image_size">
		</div>

Answer 1

CSS代表“层叠样式表”，表示有一个垂直层次结构。当两个规则都适用时，您的下层代码将占据主导地位，在这种情况下，小于360像素的屏幕尺寸也小于1024像素。如果您希望360px规则具有更高的优先级，则需要将其移至1024px片段下方。

@media only screen and (max-device-width: 1024px){
    .contact_center_image{
        position: relative;
        margin-left: 23%;
        bottom: 50px;       
    }
    .image_size{
        width: 1000px;
        height: 700px;
    }
}


@media only screen and (max-device-width: 360px){
    .contact_center_image{
        position: relative;
        margin-left: 20%;
        bottom: 50px;       
    }
    .image_size{
        width: 400px;
        height: 300px;
    }
}

Answer 2

@media only screen and (max-device-width: 1024px){

此条件将返回 true ，直到任何设备宽度大小（包括垃圾值）都包括在内。

因此将其视为：

@media only screen and (any-device-width-up-to-1024+1px){

因此360px宽度小于1024px宽度，因此将同时应用您的@media规则。

请尝试使用min-device-width规则，或者为每个max-范围使用min-和@media的组合。

虽然彼此之间可以有多个规则 Cascading （当同时应用时，最后一个应用到最后），这将导致很多样式重复，并且您需要更新多个{ {1}}语句通过这些级联进行更改权限。

示例调整：

下面，第一个规则将适用于361到1024的宽度，第二个规则将适用于从0到360的宽度。

@media

为什么@media（最大设备宽度：360像素）会受到@media（最大设备宽度：1024像素）的影响？

2 个答案:

示例调整：