之前跟大家提到网页自适应设计的概念,不知道有多少朋友已经掌握它了。如果你还不是很熟悉网页的自适应设计,不妨看看下文:
一、"自适应网页设计"的概念
2000年,Ethan Marcotte提出了"自适应网页设计"(Responsive Web Design)这个名词,指可以自动识别屏幕宽度、并做出相应调整的网页设计。
他制作了一个范例,里面是《福尔摩斯历险记》六个主人公的头像。如果屏幕宽度大于1300像素,则6张图片并排在一行。

如果屏幕宽度在600像素到1300像素之间,则6张图片分成两行。

如果屏幕宽度在400像素到600像素之间,则导航栏移到网页头部。

如果屏幕宽度在400像素以下,则6张图片分成三行。

mediaqueri.es上面有更多这样的例子。
这里还有一个

本文介绍了自适应网页设计的概念,由Ethan Marcotte提出,它能根据屏幕宽度自动调整布局。主要内容包括设置viewport元标签、避免使用绝对宽度、使用相对大小的字体、流动布局、通过Media Query选择加载CSS、CSS的@media规则以及图片的自适应处理,确保在不同设备上展示良好。
最低0.47元/天 解锁文章

被折叠的 条评论
为什么被折叠?



