CSS揭秘 (1)- 关键字 currentColor、inherit、如何避免媒体查询

一、currentColor

currentColor 是一个特殊的颜色关键字,从SVG借鉴而来,这个关键字并没有一个固定的颜色值,而是一个变量。它是很多 CSS 颜色属性的初始值,比如 border-color\text-shadow\box-shadow 。它的值会自动从文本颜色那里得到。
例如:使hr自动与文本颜色一致。

二、inherit

inherit 可以用在任何 CSS 属性中,而且它总是绑定到父元素的计算值(对于伪元素来说,则会取生成该伪元素的宿主元素)。
例如:创建提示框时想小箭头能自动继承背景和边框样式。

三、如何避免媒体查询

1.使用百分比长度来取代固定长度,如果做不到这点可以尝试使用与视口相关的单位(vw\vh\vmin\vmax),它们的值解析为视口宽度或高度的百分比。
2.当需要在较大分辨率下得到固定宽度时,使用max-width而不是width,因为它可以适应较小的分辨率,而无需使用媒体查询。
3.为替换元素(img\video\iframe等)设置一个max-width,值为100%。
4.如果背景图片需要完整的铺满一个容器,不管容器的尺寸如何变化,background-size:cover这个属性都可以做到。但是,带宽不是无限的,因此在移动网页中不要将一张大图缩小来显示。
5.当图片(或者其他元素)以行列式进行布局时,让视口的宽度来决定列的数量。弹性盒布局(flexbox)或者display:inline-block加上常规的文本折行行为,都可以实现这一点。
6.在使用多列文本时,指定column-width(列宽),而不是指定column-count(列数),这样可以在较小的屏幕上自动显示为单列布局。

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复