屏幕宽度和父div宽度CSS的OR条件。 基于父元素宽度的媒体查询

Question

如何根据屏幕宽度和父元素宽度编写媒体查询。

目前，我创建了一个php插件，可以生成一些html输出。 那个html输出是响应式的，为此我写了一些媒体查询。 但是当我在另一个网页或网站中使用此插件时，由于该网页中父div元素的width ，它无法完全响应。 我知道如何使用javascript获取父元素的width ：

var width= $(".mydiv").parent().width();

（1）我的问题是，可以在css写入或进行条件处理，以便检查屏幕宽度小于450 （测试值）或父div宽度小于450，然后应用某些css

（2）是否可以仅将css用于该规则。

请看代码。

.row::after {
 content: "";
 clear: both;
 display: block;
}

@media only screen and (min-width: 725px) {
    /* For mobiles: */
    .col-m-1 {width: 8.33%;}
    .col-m-2 {width: 16.66%;}
    .col-m-3 {width: 25%;}
    .col-m-4 {width: 33.33%;}
    .col-m-5 {width: 41.66%;}
    .col-m-6 {width: 50%;}
    .col-m-7 {width: 58.33%;}
    .col-m-8 {width: 66.66%;}
    .col-m-9 {width: 75%;}
    .col-m-10 {width: 83.33%;}
    .col-m-11 {width: 91.66%;}
    .col-m-12 {width: 100%;}
}

@media only screen and (min-width: 768px) {
    /* For desktop: */
    .col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
    .col-3 {width: 25%;}
    .col-4 {width: 33.33%;}
    .col-5 {width: 41.66%;}
    .col-6 {width: 50%;}
    .col-7 {width: 58.33%;}
    .col-8 {width: 66.66%;}
    .col-9 {width: 75%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%;}
}


    <div class="row">
    <div class="col-3   col-m-3 cub-menu">html sidebar elements</div>
    <div class="col-9  col-m-9">html main elements </div>


</div>

目前这是基于屏幕宽度的工作。 但是，当我的插件在网站上运行时，该行div就会变成其他div的下一个

<div class='parrent-clas-something'>
     <div class="col-3   col-m-3 cub-menu">html sidebar elements</div>
    <div class="col-9  col-m-9">html main elements </div>

</div>

所以我需要的是查询就像[@media only screen and (min-width: 768px) || parent element width >768]{ [@media only screen and (min-width: 768px) || parent element width >768]{ ......

} 请帮忙 。

Answer 1

您也可以使用jQuery添加CSS属性。

if (width<450){
 $(".mydiv").css({
  height: '450px',
  backgroun: '#000',
  position: 'absolute'
})
} 
// or ...
$(".mydiv").parent().css ....

Answer 2

是的，可能

@media only screen and (max-width: 450px) {
body {
    you css rules here
}
}