如何实现响应式布局？
- CSS 3 Media Query(最简单)
- 原生Javascript(成本高，不推荐使用)
- 第三方开源框架(可以很好的支持浏览器响应式布局的设计)
Media常见属性：
device-width, device-height 屏幕宽高
width, height 渲染窗口宽高
orientation 设备方向
resolution 设备分辨率
内联样式写法
1 2 3 4 5 | <style> @media screen and (min-width: 480px){ body{background: blue;} }</style> |
外部样式写法
1 | <link type="text/css" rel="stylesheet" href="link.css" media="only screen and (max-width:480px)" > |
Bootstrap响应式框架
官网地址：http://getbootstrap.com/
头部引用的代码参考
1 2 3 4 5 6 7 8 9 10 | <meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="css/bootstrap.min.css"><!--[if lt IE 9]> <!--IE低版本兼容HTML5--> <!--IE低版本兼容CSS3--><![endif]--> |
通常会在body标签中最后加入
1 2 3 | <!--引入jQuery和Bootstrap的JS插件--> |
