响应式开发

最新推荐文章于 2022-06-20 19:21:04 发布

王可zykon

最新推荐文章于 2022-06-20 19:21:04 发布

阅读量505

点赞数 1

文章标签：响应式

学习笔记专栏收录该内容

21 篇文章 0 订阅

订阅专栏

响应式开发

1.什么是响应式开发

顾名思义，同一个网站兼容不同的大小的设备。如PC端、移动端（平板、横屏、竖排）的显示风格。描述响应式界面最著名的一句话就是“Content is like water”，翻译成中文便是“如果将屏幕看作容器，那么内容就像水一样”。

2.为什么要设计响应式开发

因为市面上出现了越来越多的智能移动设备，“主流设备”的概念正在消失，同一张图片在不同设备上看起来，大小可能天差地别。如果因此一个网页需要考虑到不同端的分辨率，用户的使用习惯。因此,响应式web设计的出现,其可用性被大大提高,无论是在哪个用户端,用户都可以按照自己的使用习惯浏览页面，减少使用时发生错误的几率，从而获得更好的用户体验。

3.响应式界面的四个层次

1、同一页面在不同大小和比例上看起来都应该是舒适的；

2、同一页面在不同分辨率上看起来都应该是合理的；

3、同一页面在不同操作方式（如鼠标和触屏）下，体验应该是统一的；

4、同一页面在不同类型的设备（手机、平板、电脑）上，交互方式应该是符合习惯的。

4.常用的响应式开发框架

Gumby Framework

Gumby 2是建立在Sass基础上的。Sass是一款非常强大的CSS 预处理器，允许用户自主快速的开发扩展Gumby，同时提供很多新的工具来自定义和扩展Gumby框架。Gumby 2是一个非常棒的响应式CSS框架。

Get UI Kit

Get UI Kit是一款轻量级、模块化的前端框架，可快速构建强大的web前端界面，而且，它是一款开源的前端UI界面的框架，可以无任何限制的使用UIKit 来创建自己的风格。

Foundation

Foundation是一个易用、强大而且灵活的框架，用于构建基于任何设备上的Web应用。提供多种Web上的UI 组件，如表单、按钮、标签等。

Semantic

UI是Web的灵魂！Semantic是为工程师而制作的可复用的开源前端框架。提供各种UI组件，使得开发更加直观、易于理解。

52Framework

52 Framework主要用于优化HTML5和CSS3的跨浏览器兼容性的框架，可在所有主流浏览器上运行。

PureCSS

Pure是一组小的、响应式CSS模块，可用于任意Web项目中。它可作为每个网站或Web应用的起步工具，帮助开发者处理应用程序所需的所有CSS工作，同时不会让每个应用千篇一律。

Responsablecss

Responsable使用最少的Sass，带给你最完美的响应式框架。

TukTuk

TukTuk支持代码重用功能，提供更加快速、高效的样式列表，易于添加与维护。

Kube

Kube是全球最为流行、最灵活的CSS框架之一。其带给你最强大的功能选择，极具创意性与美观性。

Ivory

Ivory是一款强大、灵活、易用的响应式框架。 Ivory基于12列的响应式网格布局，包含表格，按钮，表格，分页，拨动开关，工具提示，手风琴，选项卡等网站中常用的组件和样式。