响应式布局和Bootstrap

Coding Alan 5年前 (2015-09-20) 2672次浏览 0个评论 扫描二维码

如何实现响应式布局?

  • 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> 

 

喜欢 (0)
[]
分享 (0)
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址