您好,登录后才能下订单哦!
设计师可以分为如下两类:
HTML原生就是响应式的(HTML内容在视口内流式的分布)。随着CSS的广泛应用,设计者创建了许多固定布局的“盒子”并把内容强制的放在盒子之中,这有悖于HTML原生响应的特性。
过去几年出现了一场革命,包括自适应设计,响应式设计,移动优先设计等。所有这些思想最根本部分就是优先考虑内容。CSS3也因此定义和实现一些新的属性。其中就包括内在和外在的宽度(intrinsic and extrinsic width values)。
我们以一个常规的 WEB 页面设计问题(figure
元素内的图片)来引出问题并加以说明。
<figure>
<img src="o4iaq1g8nr.jpg" />
<figcaption>www.30ke.cn</figcaption>
<p>三十客 - 一个专注于前端学习和分享的网站。</p>
</figure>
因为figure
是块级标记,所以元素一直延伸到至整个容器中。 在以内容优先的设计中,我们通常希望容器 (本例中为 figure
元素) 尽可能小。 到目前为止,有几种方法可以实现。
figure {
float: left;
}
通过设置浮动,可以实现 figure
元素折叠。但是如果 figure
中的 p
(段落)元素宽于图片宽度,则figure
元素会收缩至最宽的子元素,而不是图片的宽度。
使用display: inline-block
或 table-cell
同样有上述问题。
figure {
width: 500px;
}
将 figure
元素写死一个宽度,但这使得元素固定并失去响应特性。
min-width
来帮忙我们最终就是要找到最优的图片容器的宽度以最达到最好的适应内部图片的目的。如果内部的文本换行显示也没关系。
我们可以通过 min-content
来达到目的。尽管该值 2006 年就出现了,但还处在实验阶段,因此需要添加不同浏览器前缀。
figure {
border: 2px solid black;
background: #cae9b8;
margin: 0;
width: -moz-min-content;
width: -webkit-min-content;
width: min-content;
}
上述代码,很好的解决了上述问题。而且 margin
和 padding
在图片容器内部仍然有效。
min-content
是内在和外在的宽高系列值中的一个,其它还包括 max-content
, fit-content
等。这些值和 flexbox
,grid
和其它布局系统,使得WEB设计更优秀更灵活。min-content
的支持性很好,所有现代主流浏览器都支持该值,但是 Internet Explorer
and Opera Mini
并不支持。
因此我们借助 max-widht
实现了回退的方案。
figure {
max-width: 500px;
max-width: min-content;
}
完整的带回退的显示方案见如下演示程序:
在线演示程序
原文地址
本文主要汇编自 Dudley Storey 的一篇博客,并加入了针对Internet Explorer
and Opera Mini
的回退方案。但是因为本人水平有限,文中难免存在描述不清,代码不完善等问题,还请大家多多予以批评指正!
CSS Intrinsic & Extrinsic Sizing Module Level 3
Design From the Inside Out With CSS Min-Content
play.csssecrets.io/
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。