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

Question

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

目前我创建了一个生成一些html 输出的php 插件。 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) ||父元素宽度 >768]{……

}请帮忙 。

Answer 1

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

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