Responsive Design with Twitter Bootstrap

最新推荐文章于 2019-05-07 01:55:14 发布

原创最新推荐文章于 2019-05-07 01:55:14 发布 · 806 阅读

0 ·

CC 4.0 BY-SA版权

JavaScript_CSS 专栏收录该内容

36 篇文章

订阅专栏

本文介绍了响应式设计的基本概念，利用CSS3媒体查询使网站能够根据不同屏幕尺寸调整布局。文中还提到了Bootstrap框架如何帮助实现这一目标。

Responsive Design

Responsive design is fundamentally the concept of changing the way your application looks and behaves as the screen size gets smaller. This is done using CSS3 media queries.

Media Queries

Media query is a really fancy term for "conditional CSS rule". It simply apples some CSS based on certain conditions set forth. If those conditions are met, the style is applied.

Media queries are supported in IE9+ and pretty much every other browser, including mobile where they are particularly applicable. If you want to get simple Media Query support for IE7 and 8, you can use the popular Respond.js pollyfill.

Media queries have two parts, a device specification and then a size rule.

Making our application responsive

Twitter Bootstrap includes a response.css file which will take care of Bootstrap's stake in our little application's success. Go ahead and add that file to your application's header underneath the bootstrap link.

<link href="css/bootstrap-min.css" rel="stylesheet">
<link href="css/bootstrap-responsive-min.css" rel="stylesheet">