Bootstrap 自适应窗口
2016-04-06 10:26
471 查看
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>Media Queries</title> <style> body{background:#000;} @media(min-width:767px) and (max-width:979px){body{background:#f00;}} </style> </head> <body> </body> </html>
“#000”是黑色,”#f00”是红色,利用media判断设备屏幕大小,如果屏幕大小在767px和979px之间,网页背景显示红色;如果小于767px或大于979px,显示黑色。利用@media可以自适应屏幕大小的网页。
bs2中引用bootstrap-responsive.css 做响应式布局,在3.X版中就不存在了,因为3.X版默认就是responsive的。
相关文章推荐
- Bootstrap布局
- 【第一章第一回】BootStrap 简介
- BootStrap之基础-4 插件(JS插件)
- Bootstrap学习笔记—关于网格系统
- BootStrap之基础-3 组件
- Bootstrap提供的jQuery插件——弹出消息框,三个插件函数:
- BootStrap之基础-2 CSS样式(全局CSS样式)
- Bootstrap学习笔记—关于表单
- jQuery Modal bootstrap风格对话框插件
- BootStrap之基础-1 BootStrap起步(基本概念、环境搭建)
- bootstrap——free bootstrap admin dashboard templates
- bootstrap学习笔记
- 超漂亮的Bootstrap 富文本编辑器summernote
- play with bootstrap and less
- bootstrap 练习
- 超漂亮的Bootstrap 富文本编辑器summernote
- Bootstrap学习4
- 关于bootstrap treeview的点击事件
- bootstrap初体验
- Bootstrap学习之1 基本模板