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

} 请帮忙。

Answer 1

您也可以使用jQuery添加css attribues。

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

或css中的条件用于屏幕宽度和父div宽度，。基于父元素宽度的媒体查询

2 个答案: