CSSの画面幅と親div幅のOR条件。親要素の幅に基づくメディアクエリ

Question

画面の幅と親要素の幅に基づいてメディアクエリを書き込む方法。

現在、htmlの出力を生成するphpプラグインを作成しています。そのhtml出力は応答的です。そのために私はいくつかのメディアクエリを書きます。しかし、このプラグインを別のWebページやウェブサイトで使用しているとき、そのWebページに親のdiv要素のwidthがあるため、これは完全に反応しません。 iはjavascriptのを使用して、親要素widthを取得する方法を知っている：

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

（1）私の質問があり、書いたり、それが画面の幅が小さいのどちらかチェックするようにcssで条件が可能です（試験値）または親div幅未満次いで適用され、特定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> 

現在、これは画面幅に基づく作業です。しかし、時にウェブサイト上で私のプラグインの実行は、この行は

} は助けてください......私は必要なものをクエリが[@media only screen and (min-width: 768px) || parent element width >768]{ のようなもので、たとえば他の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> 

なっDIV。

Answer 1

CSSの属性もjQueryで追加できます。

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 
} 
}