响应式网页设计

响应式Web设计

即网页内容会随着访问它的视口及设备的不同而呈现不同的样式。

全球桌面与移动与平板电脑市场份额

(图片来源于statcounter)

  • 图片表明使用移动的用户占绝大多数,仍有一定比例的用户使用桌面和平板,响应式Web设计有利于不同用户观看不同屏幕的设备,可以在不同的设备中任意切换,提高不同使用者的便捷性能。

有无采用RWD对比

中山大学无采用RWD.PNG

中山大学南方学院采用RWD.PNG
  • 从例子中看出,拥有RWD可以使视口根据不同的设备呈现不同的变化,用户可以便捷的使用该网站,且RWD可以使得该网页的页面简洁清晰,提高网页的可视化。

RWD的三种组成科技

  • 弹性网格布局:网站的宽度大小以百分比形式定义,百分比布局使得网页宽度能够随着查看他们的窗口大小变化。
  • 弹性图片/媒体:使图片在不同大小的屏幕中放缩自如。
  • 媒体查询:媒体查询包含媒体类型和零个或多个检测媒体特性的表达。width、height 和color 都是可用于媒体查询的特性。使用媒体查询,可以不必修改内容本身,而让网页适配不同的设备。

RWD的前端(frontend)和后端(backend)

前端(frontend):用户接受信息的来源。
后端(backend):数据的传输和储存。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容