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

【问题标题】：OR condition in css for screen width and parent div width, . Media query based on parent element width屏幕宽度和父 div 宽度的 css 中的 OR 条件。基于父元素宽度的媒体查询
【发布时间】：2016-10-09 19:39:28
【问题描述】：

如何编写基于屏幕宽度和父元素宽度的媒体查询。

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

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

(1) 我的问题是，可以在css 中写入或设置条件，以便检查屏幕宽度是否小于450（测试值）或父@987654329 @宽度小于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]{ ......

} 请帮忙。

【问题讨论】：

我已经使用了媒体查询。但它与屏幕宽度无关。这是关于屏幕宽度和父 div 宽度的组合。
我编辑了问题。请阅读。

标签： javascript html css media-queries

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

是的，可能

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

【讨论】：

如果父元素的宽度为 350px 而屏幕的宽度为 1280px，我认为这不会起作用。