服务范围



自适应设计网站
自主适应
浏览环境的变化

传统网页设计
(固定宽度页面布局)
or
自适应网页设计
(流式页面布局)


多种布局方式组合应用
大屏幕、中屏幕使用固定宽度布局。
小屏幕使用流式页面布局。


为什么需要自适应网页设计?
“时代在进步,不断涌现的各种新型设备(手机/平板电脑)、平台
和浏览器都需要你的网站的网页能够兼容显示。
自适应网页设计代表了一种必然的设计趋势
今后十年所有的网站都将采用自适应网页设计。”
- Jeffrey Veen


小屏幕 + 中屏幕 + 大屏幕
一种设计兼容所有尺寸的屏幕


谁在使用自适应网页设计?
不仅仅只用在演示、
流行设计和页面美化中。大量的网站已经采用了
自适应网页设计。

何时需要采用自适应网页设计?
当你需要考虑以下事情时:
时间&金钱
各种浏览器支持
性能
内容呈现
网站vs移动应用


如何实现自适应网页设计?
“停止考虑单一页面。考虑整个系统。”
- Jeremy Keith


采用框架
(省时)
or
自己开发
(更多自主应用)

最佳设计方法
分析页面内容
从小屏幕开始(手机支持第一考虑)
关掉PhotoShop,打开浏览器
页面内容模块化
优化再优化
*更好的设计方法会不断出现!



手机上网固然便捷,但是对于网站设计师而言,却又得面临新的难题:如何才能在不同大小的设备上呈现同样的网页?手机和电脑的显示是有很大差别的,以前用电脑打开网站是很正常的,但是很可能在手机上的显示就非常的不适于人阅读。 很多网站的解决方法,是为不同的设备提供不同的网页,比如专门提供一个mobile版本,这样固然保证了效果,但是比较麻烦,同时要维护好几个版本,大大增加了架构设计的复杂度。“自适应网页设计”指可以自动识别屏幕宽度、并做出相应调整的网页设计。


 “自适应网页设计”到底是怎么做到的? 首先,在网页代码的头部,加入一行viewport元标签。 viewport是网页默认的宽度和高度,上面这行代码的意思是,网页宽度默认等于屏幕宽度(width=device-width),原始缩放比例(initial-scale=1)为1.0,即网页初始大小占屏幕面积的100%。 由于网页会根据屏幕宽度调整布局,所以不能使用绝对宽度的布局,也不能使用具有绝对宽度的元素。这一条非常重要。 “流动布局”的含义是,各个区块的位置都是浮动的,不是固定不变的。float的好处是,如果宽度太小,放不下两个元素,后面的元素会自动滚动到前面元素的下方,不会在水平方向overflow(溢出),避免了水平滚动条的出现。 


“自适应网页设计”的核心,就是CSS3引入的Media Query模块。它的意思就是,自动探测屏幕宽度,然后加载相应的CSS文件。同一个CSS文件中,也可以根据不同的屏幕分辨率,选择应用不同的CSS规则。 除了布局和文本,”自适应网页设计”还必须实现图片的自动缩放。有条件的话,最好还是根据不同大小的屏幕,加载不同分辨率的图片。


二维码 返回顶部