响应式布局
一、如何实现响应式布局
- css3-Media Query（最简单的方式）
- 借助原生Javascript（成本高，不推荐使用）
- 第三方开源框架（可以很好的支持浏览器响应式布局的设计 如;bootstrap）
二、css3-Media Query简单案例
1、常见属性
- device-width，device-height -----------------屏幕宽高
- width，height ------------------渲染窗口宽高
- orientation ------------------设备方向
- resolution -------------------设备分辨率
2、基本的语法
- 外联样式表语法
-
body{ background-color: red; }
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <link href="link.css" type="text/css" rel="stylesheet" media="screen and (max-width:480px)" /> </head> <body> </body> </html>
- 内嵌样式语法
-
demo<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <link href="link.css" type="text/css" rel="stylesheet" media="screen and (max-width:480px)" /> <style> @media screen and (min-width:480px) { body{ background-color: #000055; } } </style> </head> <body> </body> </html>
三、响应式布局之bootstrap
先将以下两个样式引入到HTML中
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1.user-scalable=no"> <link rel="stylesheet" href="dist/css/bootstrap.min.css">
1、栅格系统
- 注重应用规则
- 熟练掌握栅格化布局的相关知识
- bootsrap官网http:getbootstrap.com/css查看命名规则
- 首先需要为栅格化布局定义一个外围容器 <div class="row"></div>
2、bootstrap组件components
