本文分享了六个响应式网页设计的实用技巧，包括使用百分比布局、max-width属性、背景图自适应、基于视口宽度的图片布局、多列文本自适应及列宽设定，帮助开发者创建适应各种屏幕尺寸的网站。
做响应式网页需要注意：
1.使用百分比来代替固定长度
2.当你需要在较大分辨率下得到固定宽度时，使用max-width而不是width，因为他可以适应较小的分辨率；
3.不要忘记给替换元素（eg.img,object,video,iframe）设置一个max-width，值为100%；
4.背景图铺满整个容器，不管容器的尺寸变化，background-size：cover；这个属性可以做到；
5.当图片以行列式布局的时候，让视口的宽度来决定列的数量，flexbox或者display：inline-block；
6使用多列文本时，指定column-width（列宽）而不是column-count（列数），这样他就可以在较小的屏幕上自动显示为单列布局；
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
