自定义CSS媒体查询条件

Question

我想基于响应式设计的父元素的宽度来更改元素的某些CSS属性。

例如，

父元素将具有200像素的最小宽度，并且将延伸到在最大500像素不管屏幕尺寸/宽度的。我想根据其父容器的宽度为其子元素设置固定宽度。

我在寻找没有Javascript的解决方案。如果可以以某种方式使用自定义媒体查询来实现，则为+1。

请指教。

Answer 1

使用媒体查询

@media only screen and (min-width : 200px) { 

} 

@media only screen and (min-width : 500px) { 

} 

Answer 2

试一次

@media screen and (min-width: 200px) and (max-width: 499px) { 
    //styles here  
} 

@media screen and (min-width: 500px) and (max-width: 1024) { 
    //styles here 
}