什么是响应式布局?响应式网站起源

发布时间:2020年7月3日 查看次数:88

响应式网站已经成为时下网站建设主流,下面介绍一下什么是响应式布局?和响应式网站起源。

响应式web设计(Responsive web design)是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。 响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验,而且随着大屏幕移动设备的普及,用“大势所趋”来形容也不为过。随着越来越多的设计师采用这个技术,我们不仅看到很多的创新,还看到了一些成形的模式。

起因
因为越来越多的智能移动设备( mobile, tablet device )加入到互联网中来,移动互联网不再是独立的小网络了,而是成为了 Internet 的重要组成部分。响应式网络设计 ( RWD / AWD)的出现,目的是为移动设备提供更好的体验,并且整合从桌面到手机的各种屏幕尺寸和分辨率,用技术来使网页适应从小到大(现在到超大)的不同分辨率的屏幕。

注: Responsive Web Design = RWD,Adaptive Web Design = AWD,下同

设计
RWD:

  • 采用 CSS 的 media query 技术
  • 流体布局( fluid grids )
  • 自适应的图片/视频等资源素材

(为小、中、大屏幕做一些优化,目的是让任何尺寸的屏幕空间都能得到充分利用)

AWD:

  • CSS media query 技术(仅针对有限几种预设的屏幕尺寸设计)
  • 用 Javascript 来操作 HTML 内容
  • 在服务器端操作 HTML 内容(比如为移动端减少内容,为桌面端提供更多内容)

设计思路
Mobile First(从移动端开始,RWD ):
一切从最小屏幕的手机端开始(比如 iPhone 的 320px ),先确定内容,然后逐级往大屏幕设计。
不同于原来网页设计,总是从桌面电脑的 1024px 开始的。

转载此文章须经作者同意,并附上出处及文章链接。 http://kuaping.com/xiangyingshi-wangzhan-qiyuan/

跨屏Sass平台网站一键适配手机方案

只需要在原网站上加一行JS代码即可快速适配手机,3分钟即可部署上线

电话:027-81777732

邮箱:fuwu@kuaping.com

地址:武汉光谷SBI创业街特1栋单元1903

网址:www.kuaping.com