bootstrap响应式布局

郑云飞

浏览: 817630 次
性别:
来自: 北京

最近访客更多访客>>

anlinko

ssydxa219

u012363178

jiyilee

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

bootstrap

关于作者：

郑云飞(天放), 程序员Java
weibo：@tianFang
blog: zhengyunfei.iteye.com
email: zhengyunfei8@gmail.com
学习路线图
跟我一步一步学习bootstrap

bootstrap在网页中使用

bootstrap布局

bootstrap响应式布局

现在呢用户上网所使用的设备都不太一样，又可能是大屏幕的桌面电脑，也可能是平板电脑，或者是智能手机，那么这些设备屏幕的上网尺寸都不太一样，如果你想在不同的上网设备上优化页面的设计的话，你可以考虑使用响应式的布局设计，响应式布局就是根据浏览窗口的尺寸做出相应的变化，比如你可以设置当浏览窗口小于940像素的时候，文字的大小变成15像素，原理呢其实很简单，就是利用css3的media queries来判断浏览窗口的尺寸，我们可以在css样式表里面去设计一些规则，比如当浏览窗口的宽度小于或者是大于某个尺寸的时候，那么应用某些特定的样式，比如找一些代码，@media (max-width:767px){}。那么这一行代码的意思就是当浏览窗口小于767像素的时候，在页面里面去应用｛｝大括号之间去定义的那些样式，下面我们通过一个简单的演示来帮助你理解一下响应式的布局设计，我们先创建一个mediaqueries.html文件，

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title></title>
</head>
<body>

</body>
</html>

下面我们为这个页面去添加一下样式，首先我们为这个页面添加，body{background:#000;}这样就把页面的背景颜色设置为黑色，再加入下面这行代码 @media (max-width: 767px) {body{background: #f00;}

}这行代码的意思就是当窗口的宽度小于767像素的时候，就重新定义body的背景颜色变为#f00红色，下面我们在浏览器中预览一下；

下面我们把窗口的宽度缩小，小于767像素的时候，窗口如下：

窗口的颜色变为红色。

我们可以把max-width:767px换成min-width:767px;效果正好相反，当窗口的宽度小于767像素的时候，背景颜色是黑色，大于等于767像素的时候背景颜色是红色。我们还可以组合一下，@media(min-width:767px) and (max-width:979px){body{background:#foo;}}这段代码的意思就是当窗口的尺寸在767px和979px的时候，会触发我们在大括号里面定义的样式

上一篇博客：bootstrap布局下一篇博客：工作中遇到的bootstrap知识点总结