响应式网页的设计与实现

最近学前端接触到了框架，介绍并记录自己的学习收获。

前言

各种移动智能设备的广泛应用，带动了互联网应用向移动平台方向发展，并呈现多元化的趋势。但智能手机、平板电脑、智能手表等多种移动设备相对于PC端的屏幕尺寸较小，所以大部分在PC端上显示的页面并不能很好地在移动互连设备上呈现。由于各种各样设备屏幕的分辨率、尺寸和型号越来越多，要在不同屏幕、不同系统平台等环境下保持网页布局的一致性，满足用户的一致体验已成为网页设计行业发展方向。基于Bootstrap框架的响应式网页设计就是一种全新的设计理念，根据这一理念所制作出来的网页框架可以作为通用模板，开发者根据需求选择模板，从而设计出适应不同设备的网站，增强用户体验。

一. 响应式网页技术

“响应式网页设计”就是自动适应，它可以自动识别屏幕尺寸，从而调整出适合的网页。在做网页页面设计时，非常强调模块化的设计，要求一个合格的模块能够做到“可扩展、无侵染”，在任何移动终端都能正常显示。响应式网页在任何设备中都能够正常适配，而不用为每个设备单独做“子网站”。简而言之，就是一个网站能够兼容多个终端，而不是为每个终端做一个特定的版本。
响应式设计的网站能满足各种类型终端用户的需求，带给所有终端用户最优的访问体验。当然，专为手机或平板设计的网站也能满足部分访问者的要求，但根据调查得知，常用的移动终端设备有200多种不同的屏幕尺寸，设计者不可能为所有屏幕尺寸都设计一份独有的网站。因此，响应式设计就显得尤为重要。一个在手机上不能正常显示的网站只会给企业带来负面影响，给用户带来很差的用户体验。

二.响应式前端开发框架（响应式HTML5框架）

响应式前端开发框架是指一系列产品化的HTML/CSS/Javascript组件的集合，Web前端工程师可以在设计中使用该开发框架。利用框架，可以花最少的精力创建响应式且符合用户要求标准的网站，整个开发流程都变得简单并且具有一致性。框架并不仅仅是指CSS、栅格之类的一些内容，它们包括的是整套的前端开发框架。
目前，前端开发框架有很多，下面主要介绍Bootstrap框架。

Bootstrap
Bootstrap是目前桌面端最流行且用得最广泛的开发框架，由Twitter推出。Bootstrap主要针对桌面端市场，Bootstrap3提出移动优先，不过目前桌面端依然还是其主要目标市场。Bootstrap主要基于jQuery进行Javascript处理，支持LESS来做CSS的扩展。如果想要在Bootstrap框架中使用Sass，则需要通过Bootstrap-Sass(https://github.com/thomas-mcdonald/bootstrap-sass)项目增加兼容。
Bootstrap框架在布局、版式、控件、特效方面都不错，预置了丰富的效果，极大方便了用户的开发；在浏览器兼容性方面，目前Firefox、Chrome、Opera、Safari、IE8+等主流浏览器，Bootstrap都提供支持；在框架扩展方面，随着Bootstrap的广泛使用，扩展插件和组件也非常丰富，涉及显示组件、兼容性、图标库等各个方面。总之，Bootstrap提供一套优美的、直观的Web设计工具包和很多流行的样式，简洁的UI组件、栅格系统，以及常用的Javascript插件，可以用来开发跨浏览器兼容且美观大气的页面。

其他的响应式前端框架还有：

2.Foundation
Foundation是ZURB旗下的主要面向移动端的开发框架，但也保持对桌面端的兼容，目前已更新到Foundation4版本。它是一款强大的、功能丰富，且支持响应式布局的前端开发框架。框架主要采用jQuery和Zepto（语法类似jQuery，但比jQuery更轻量级）作为Javascript基础，CSS则基于Sass、Compass，有着很好的扩展性，并有着丰富的布局、版式和多种多样的控件与特效，非常方便开发者使用。控件的响应式效果也能帮助用户识别不同浏览器效果。

3.Gumby
Gumby基于Sass开发，是一款出色的响应式CSS框架，它包括一个Web UI工具包，有按钮、表格、导航、标签、JS插件等。

还有一些如52Framework、Groundwork、Kube等，感兴趣的可以搜一下噢，这里不详细介绍了。

因为自己刚上手响应式前端框架，所以就学了用得很广泛的Bootstrap，若后续有用到更好的，会写篇文章做对比。因为自己看了网课和一些视频，课本，基本都用到Bootstrap，所以还是推荐大家用这个吧。

提示

这里说明一下，自己在搜集资料的时候，发现大家容易一个搞混的问题（包括我自己在学习的时候），就是Bootstrap和vue都是前端框架，很多人分不清两者的区别。在这里我说明一下。

前端框架：Bootstrap与Vue的区别

首先，明确一点，两者不是一个层级的。

Vue是一套用于构建用户界面的渐进式框架（前端js库，将前端开发组件化），和react，angular并列“前端三大框架”。可做出如后台管理系统等具有复杂交互的系统。
（功能开发框架）
Bootstrap是基于jquery的UI组件库，而且Bootstrap大部分组件是依赖css的，使用时比如一些网页中的输入框，按钮等的炫酷样式。
（界面效果框架）
到这里大家应该对两者有些理解和区分了吧？

今天就写到这里啦，有问题的话在评论区问噢(●’◡’●)

（自己是大一计科专业的学生，因为感兴趣，课后自学前端，希望不对的地方，大佬可以帮忙指正，谢谢啦！）

Web前端响应式框架相关推荐

web前端响应式布局,自适应全部分辨率
写phpd的我. 近期公司要弄个app关键是没有web开发,而我有比較闲,那就扛枪上阵吧. 响应式布局,web端的?php我一直都是用tp框架,对于web首先想到的是bootstrap框架.仅仅是简单 ...
15个最好的HTML5前端响应式框架(2014)
文中的多个框架基于SASS创建,SCSS是一种比LESS更简洁的样式表编程语言,它能够编绎成CSS,可复用CSS代码,声明变量,甚至是函数,类Ruby/Python的语法.參见: LESS vs SA ...
响应式html5框架,15个最好的HTML5前端响应式框架(2014)
注1* 之前我们比较过Foundation和Bootstrap, 这篇文章更加系统地介绍了目前比较浏览的前端响应式框架. 注2* 文中的多个框架基于SASS创建,SCSS是一种比LESS更简洁的样式表 ...
php前端响应式框架,响应式css前端框架有哪些
响应式css前端框架有:1.Semantic UI Framework:2.Less Framework:3.Foundation Framework:4.UIkit Framework:5.YUI ...
WEB前端响应式布局之BootStarp使用
1.Bootstrap简介: 1. 概念: 一个前端开发的框架,Bootstrap,来自 Twitter,是目前很受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JavaScript ...
Web前端---响应式室内家具网页设计（HTML+CSS+JS）
临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?网页要求的总数量太多?HTML网页作业无从下手?没有合适的模板?等等一系列问题.你想要解决的问题,在这里常见网页设计作业题材有个 ...
推荐一款国内前端响应式框架Pintuer
拼图响应式前端框架版响应式后台正式发布. 考虑到目前拼图的状况,我们不打算免费开放下载,但也不会收各位朋友1分钱,该版后台将有偿提供给各位给予拼图贡献的朋友. 废话不多说,一切皆以有图有真相,下面上图 ...
java web响应式框架_Web开发的十佳HTML5响应式框架
HTML5框架是一类有助于快速轻松创建响应式网站的程序包.这些HTML5框架有着能减轻编程任务和重复代码负担的神奇功能.关于HTML5的框架种类繁多,并且很瘦欢迎,因为它能允许开发人员花费更少的时间和 ...
easyui前端框架模板_.NET Core基于Ace Admin的响应式框架
(给DotNet加星标,提升.Net技能) 转自:netnrcnblogs.com/netnr/p/12020660.html 前言 .NET Core的响应式框架基于Ace Admin框架菜单导航 ...

Web前端响应式框架

响应式网页的设计与实现

前言

一. 响应式网页技术

二.响应式前端开发框架（响应式HTML5框架）

提示

前端框架：Bootstrap与Vue的区别

Web前端响应式框架相关推荐

最新文章

热门文章