jquery响应式 jquery响应式布局

解释响应式布局，怎么实现的？有几种方法实现

1.原生代码实现。

在国内目前设计网页的时候，一般会分成PC端和移动端两套页面，但在一定的情况下，必须满足只设计一个页面的情况下，满足不同端口都能正常使用，

因此会用用到自适应的方法。

用原生代码实现的根本在于媒体查询@media的设置。

@media screen 可以查询当前浏览器的尺寸，因此可采用该方法对同一个页面设置不同的CSS样式，来满足不同分辨率要求。

2.采用bootstrap框架布局

bootstrap框架布局完成的页面，是自动对应的自适应效果。

但是在书写的时候，应该严格按照bootstrap的书写规范，才不会出现怪异性问题。

写法举例：

说明：最后的数字对应该div所占栅栏的列数。

jquery响应式 jquery响应式布局

col-md-6 代表在PC端上显示在一行的6个栅栏，也就是一半。

col-sm-6 代表在平板上也显示div占当前行的一半。

col-xs-12 代表在手机端显示为当前行的百分之百填充。

3.还有其他方式，如JQuery和专门做响应式的JS文件，比如nicebox均能实现自适应效果，实现响应式布局。

jQuery Mobile是什么

jQueryMobile是一个基于jQuery的用户界面框架，兼容所有流行的手机，平板电脑，电子阅读器和桌面（浏览器）平台。为了建立可访问性及普及性访问性和普及，我们遵循渐进增强和响应式网页设计(RWD)原则。HTML5标签结构使它容易上手，但是一个强大的API却能让你轻松的深入定制。Jquerymobile是由（MT）MediaTemple联合多家移动设备厂商以及软件企业共同发起的的针对触屏智能手机与平板电脑的website以及在线应用的前端开发框架。 Jquerymobile构建于Jquery，为前端开发人员提供了一个兼容所有主流移动设备平台的统一UI接口系统。拥有出色的弹性，轻量化以及渐进增强特性与可访问性。

jQuery Mobile 是创建移动 web 应用程序的框架。jQuery Mobile 适用于所有流行的智能手机和平板电脑。jQuery Mobile 使用 HTML5 和 CSS3 通过尽可能少的脚本对页面进行布局。Jquery mobile是一个基于HTML5，拥有响应式网站特性，兼容所有主流移动设备平台的统一UI接口系统，与前端开发框架。可以运行在所有智能手机，平板电脑和桌面设备上。 jQuery Mobile秉承 “write less, do more”的原则到了一个新的高度：不需要为每一个移动设备或者操作系统单独开发应用，jQuery Mobile框架可以使您设计一个高度响应式的网站或应用运行于所有流行的智能手机，平板电脑和桌面系统。