响应式布局和Bootstrap

Alan

9 年前

如何实现响应式布局？

CSS 3 Media Query(最简单)
原生Javascript(成本高，不推荐使用)
第三方开源框架(可以很好的支持浏览器响应式布局的设计)

Media常见属性：

device-width, device-height 屏幕宽高

width, height 渲染窗口宽高

orientation 设备方向

resolution 设备分辨率

内联样式写法





<style>
	@media screen and (min-width: 480px){
		body{background: blue;}
	}
</style>

外部样式写法

<link type="text/css" rel="stylesheet" href="link.css" media="only screen and (max-width:480px)" >

Bootstrap响应式框架

官网地址：http://getbootstrap.com/

头部引用的代码参考

<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-->
  <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  <!--IE低版本兼容CSS3-->
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->

通常会在body标签中最后加入

<!--引入jQuery和Bootstrap的JS插件-->
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>