Bootstrap页面布局5 - 响应式布局(格式)

旨在优化不同上网设备中页面显示的优化

　　响应式布局：就是根据浏览窗口的尺寸，改变页面的变化

　　原理：利用css的media-queries判断浏览窗口的尺寸，在CSS样式表中设置一些规则！

 

　　例如：

　　在<style></style>标签中输入如下css3的格式实现：

　　<style>

　　　　body {background:green;} //注意这里不能写成行内样式，使用CSS样式定制样式

　　　　@media (max-width:767px) {body{background:red}} //紫色部分表示需要定制的元素的规则

　　</style>

　　解读：上面的代码的意思是实现，当浏览窗口尺寸小于767px时，重新设定body标签的样式为字体12像素，背景色变红！

　　　　同理：

　　　　@media (min-width:767px) {body{background:yellow}}

　　　　上面的代码的意思是实现，当浏览窗口尺寸大于767px时，重新设定body标签的样式为字体14像素，背景色变黄！　

　　　　@media (min-width:767px) and (max-width:1000px) {body{background:blue}}

　　　　上面的代码的意思是实现，当浏览窗口尺寸大于767px且小于1000px时，重新设定body标签的样式为字体14像素，背景色变蓝！

　　　

转载于:https://www.cnblogs.com/Zell-Dinch/p/3877153.html