响应式网页设计的两个问题

响应式网页设计由于能够自动的适应不同的屏幕尺寸大小,一般具有良好的用户体验。在进行响应式网页设计中,碰到两个可能比较普遍的问题,记录在此,以备后用。

Border宽度问题

在CSS中Border的宽度只能分配固定的单位值,例如px或者em,而不能使用百分比。而固定的宽度不利于响应式设计。因而,对于这个问题,一个变通的欺骗式的办法便是利用box-shadow属性来模拟border的效果,例如box-shadow:0 0 0 1px #000;}便有类似1px宽度的边框,但对其父元素的实际宽度没有影响。

固定长宽比的图片缩放

这个问题也是比较常见的一个问题,图片或者块状元素的宽很容易设置成百分比的形式,但高度没有办法。针对这个问题的变通办法是利用padding属性。padding属性是唯一已知的可针对元素宽度(而不是父级背景元素)设置百分比的属性。

举个例子,针对<div class=“outer”><div class=”inside”></div></div>,可以利用如下css代码实现保持长宽比的响应式设计,此例为保持16:9的比例:

.outer {display: block; width: 100%; position: relative; height: 0; padding: 56.25% 0 0 0;}
.inside {position: absolute; display: block; width: 100%; height: 100%; left: 0; right: 0; top: 0; bottom: 0;}

总结,CSS的学习和使用过程中,看似很简单,但很多具体问题需要去思考和变通,才能解决问题,有时候使用的手段类似欺骗性的,但只要视觉效果达到了,也就无所谓。另外,CSS3的box-sizing: border-box;属性对响应式设计也很有帮助,该属性能使padding值不额外增加到元素长宽的百分比上,保持缩放的一致性。


除非特别声明,文章均为牛会飞的博客原创,遵循署名-非商业使用-相同方式共享授权协议
转载请注明出处: https://blogfei.com/xiang-ying-shi-wang-ye-she-ji-de-liang-ge-wen-ti/

暂无评论