LUB warunek w css dla szerokości ekranu i szerokości div rodzica,. Zapytanie o media oparte na szerokości elementu nadrzędnego - javascript, html, css, css3, zapytania o media

Jak napisać zapytanie o media na podstawie szerokości ekranu i szerokości elementu nadrzędnego.

obecnie tworzę php wtyczka, która generuje niektóre pliki html wynik . Że html out put jest responsywny, dlatego piszę jakieś zapytanie o media. Ale kiedy używam tej wtyczki na innej stronie internetowej lub w witrynie, nie jest ona w pełni responsywna z powodu rodzica div elementy width na tej stronie internetowej. wiem, jak uzyskać element nadrzędny width za pomocą javascript :

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

(1) Moje pytanie brzmi, czy można pisać lub warunkować css aby sprawdził, czy szerokość ekranu jest mniejsza niż 450(wartość testowa) lub rodzic div szerokość jest mniejsza niż 450 następnie zastosuj pewne css

(2) Czy można użyć css tylko dla tej reguły.

proszę zobaczyć kod.

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

obecnie jest to praca oparta na szerokości ekranu. Ale kiedy moja wtyczka działa w witrynach internetowych, ten wiersz div staje się na przykład pod innym 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>

więc to, czego potrzebuję, to zapytanie [@media only screen and (min-width: 768px) || parent element width >768]{ ......

} proszę pomóż .

Odpowiedzi:

Możesz także dodawać atrybuty css za pomocą jQuery.

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

Tak możliwe

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