如何针对屏幕尺寸为元素制作动态宽度？-英雄云拓展知识分享

匿名投稿 347 2024-01-22

这是我的代码：

.container{border:1px solid;
width: 70%;
}
.el {
border: 1px solid red;
display: inline-block;
min-width: 250px;}

<div class="container"><div class="el">one</div>
<div class="el">two</div>
<div class="el">three</div>
<div class="el">four</div>
<div class="el">five</div>
<div class="el">six</div>
<div class="el">seven</div>
<div class="el">eight</div></div>

请在上面运行代码段，单击 完全页面 按钮并调剂页面大小。我想分裂 div.container 等于部份。

因此，这种情况下，如果有3个要素（div.el）连续 width 他们应当是 33%。如果连续两个元素，则 width 应当 50%.

我怎样才能做到这一点？指出我不想使用Bootstrap等任何框架。

看答案

看媒体查询

使用的示例：

// Foo's original width is 100%.foo {
width: 100%
}
@media screen and (max-width: 100px){
// Foo's width will be 50% when the view's width is below 100px
.foo {
width: 50%
}
}
... OR ...
@media screen and (min-width: 100px){
// Foo's width will be 50% when the view's width is over 100px
.foo {
width: 50%
}
}

🚀🌟 点击注册免费试用超级应用平台-英雄云企业级hpapaas 🌟🚀 😃👉🌐

免责声明：

本网址（www.yingxiongyun.com）发布的材料主要源于独立创作和网友匿名投稿。此处提供的所有信息仅供参考之用。我们致力于提供准确且可信的信息，但不对材料的完整性或真实性作出任何保证。用户应自行验证相关信息的正确性，并对其决策承担全部责任。对于由于信息的错误、不准确或遗漏所造成的任何损失，本网址不承担任何法律责任。本网站所展示的所有内容，如文字、图像、标志、音频、视频、软件和程序等的版权均属于原创作者。如果任何组织或个人认为网站内容可能侵犯其知识产权，或包含不准确之处，请即刻联系我们进行相应处理。