自定义CSS媒体查询条件

Question

我想基于其父元素的宽度来更改元素的一些CSS属性，以进行响应式设计。

例如，

父元素的最小宽度为200px，无论屏幕大小/宽度如何，都将拉伸至最大500px。我想根据其父容器的宽度为其子元素设置固定宽度。

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

请指教。

Answer 1

尝试一次

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

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

Answer 2

使用媒体查询

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

}

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

}