怎样让bootstrap是什么设计的页面在手机端也能响应式自适应

这篇教程旨在让你在20分钟内学会使用twitter bootstrap创建一个站点。看完这个教程后你应该能够使用bootstrap来建立一个基本的响应式布局的页面,了解栅格系统,并且能够使用bootstrap导航、导航条和了解响应式设计的基矗这些全部都是使用twitte..

  这几天公司要求网站实现响应式布局,所以对响应式布局进行了相对全面的了解,并做了几个实例。

响应式布局是什么意思?

     响应式布局可以根据不同的浏览设备(PC端,平板,智能手机等)呈现不同的网页布局,同时减少缩放、平移和滚动。

     适应移动端的大趋势,提高用户体验,减少开发成本。

为什么要使用响应式布局?

     主要是使网页适用于用于移动端设备,屏幕分辨率是出现的最大的兼容性问题。

     可以为不同的设备提供不同的网站,也就是同一网站做普通PC端和移动端两种页面。不论是前期的开发还是后期的维护改版,都非常的麻烦。

设计原则?适合什么样的项目?

     对于非常复杂的网页布局,不适合进行网页自适应的布局,原因之一是实现成本太高,其次就是复杂页面(例如容商网首页,中国企业集群首页等)也不适合移动端的浏览。

其他的响应式布局的框架?

     Prue框架是Yahoo的一款轻量级的框架,兼容IE7以上,性能好,但是中文文档少,不利于团队开发,没有组件。

IE9(代表最新版本)
无圆角(无圆角,不支持背景尺寸属性)
无圆角, 进度条无动画(无圆角,进度条无动画)

IE6崩溃可以使用针对Bootstrap的插件Bsie解决大部分,但如果不要求对IE6支持,不建议使用,影响性能

下图分别是无圆角,正常圆角,圆角错误,圆角是CSS3属性,所以会出现兼容问题,但IE7以上都支持,已经很好了(w3school说IE9以上才支持,说明使用了css hack)

总结:支持主流浏览器,旧版本的浏览器出现的兼容性问题不大。

兼容性问题(分辨率分解-

另外不知道为什么分辨率不能显示三栏而是只显示一栏,不知道dpi和ppi是什么意思,希望知道的大牛请回复,谢谢!^_^

我要回帖

更多关于 bootstrap是什么 的文章

 

随机推荐