Question

我使用webcomponents来创建一个组件库，我的团队应该可以重用它。

我可以为我的组件添加样式以便响应并使自己适应视口。

我现在的问题是，在某些情况下，组件可以放在应用程序旁边或主要部分中。因此，对于相同的视口，组件可以具有小宽度容器或全宽度，具体取决于放置位置。

有没有办法相对于父母进行“媒体查询”？

注意：这个问题不仅适用于可以使用em或％单位轻松设置的元素大小，而且可以用于颜色或显示类型。

Answer 1

您可以根据其父级的类来定位组件的样式，例如

.aside .webcomponent{  
 /* styling of colors or display type for web component used as an aside here */  
}  

.main .webcomponent{  
 /* styling of colors or display type for web component used as in the main area  here */  
}

更新

由于我的WebComponent被其他人使用，我无法确定他将命名父元素.aside，.main，...

可能对您有用的几种可能性。

您的web组件带有一些内置布局，您可以让最终用户通过添加类或使用数据属性及其实例来控制web组件的布局。 e.g。

<webcomponent class="aside" data-colour="pink"> ... </webcomponent>

第二种可能性是在web组件中包含javascript，它查看父元素的宽度，然后根据需要操作类或值。例如

$(document).ready(function(){
    $("webcomponent").parent().css({"color": "pink"});
});

希望这有帮助！

响应式设计相对于父级而非视口

1 个答案: