自定义 CSS 媒体查询条件答案

【问题标题】：Custom CSS Media Query conditions自定义 CSS 媒体查询条件
【发布时间】：2017-03-30 04:06:02
【问题描述】：

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

例如，

父元素的最小宽度为 200 像素，并且无论屏幕大小/宽度如何，都会拉伸到最大 500 像素。我想根据其父容器的宽度为其子元素设置一个固定宽度。

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

请指教。

【问题讨论】：

您是说父对象将全屏宽度最大为 500 像素，然后以该尺寸最大？我不确定是否与屏幕尺寸有关。
是的，它不应该与屏幕尺寸有任何联系

标签： html css web responsive-design

【解决方案1】：

使用媒体查询

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

}

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

}

【讨论】：

【解决方案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
}

【讨论】：