响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验，而且随着目前大屏幕移动设备的普及，用大势所趋来形容也不为过。随着越来越多的设计师采用这个技术，我们不仅看到很多的创新，还看到了一些成形的模式。移动web前言移动web ： 移动端手机浏览器或者微信里面浏览的网页
移动app ： 手机上需要下载安装的应用程序
1. 移动web介绍1.1 响应式开发 一套代码运行多个终端 优点:开发快 维护快 适配好 缺点加载速度慢1.2 纯原生移动web开发 一套代码运行一个端 优点: 加载速度快 缺点开发慢 维护慢 适配差1.3 应用场景 :响应式开发用在一些新建的网站(pc和移动同时出来) 对加载速度要求不是很高
纯原生移动web开发 一般会用在一些已经有pc端上线的网站 再次开发移动端 移动端需要加载速度很快的网站
2. 响应式开发原理2.1 css3的媒体查询： 通过查询屏幕的的宽度来指定某个宽度区间的网页布局2.2 常见设备的屏幕宽度超小屏幕（手机） 768px以下
小屏设备（平板） 768px-992px
中等屏幕（旧式电脑） 992px-1200px
大屏设备（现代电脑） 1200px以上
2.3 媒体查询的语法 @media screen and (条件){
//满足条件执行css代码
}
and的前后必须有空格 条件通常只有两个 min-width max-width
@media (条件){
//满足条件执行css代码
}
可以简写省略 screen and
2.4 媒体查询的写法的顺序和特性2.4.1 条件判断有两种min-width 屏幕宽度大于等于某个值生效 (最小宽度)max-width 屏幕宽度小于等于某个值的时候生效 (最大宽度)
2.4.2 条件判断的参考值通常有以下4个 width > 1200 大屏幕 大屏pc设备
992 < width < 1200 中屏幕 老式电脑
768 < width < 992 小屏幕 平板设备
width < 768 超小屏幕 手机
2.4.3 媒体查询判断的顺序说明1.如果使用min-width条件判断的时候 条件判断大小 要从小到大写
/*min-width: 768px 当屏幕的宽度大于等于768时 背景颜色为green */
@media screen and (min-width: 768px){
body{
background-color: green;
}
}
/*min-width: 992px 当屏幕的宽度大于等于992时 背景颜色为blue*/
@media screen and (min-width: 992px){
body{
background-color: blue;
}
}
/*min-width: 1200px 当宽度大于等于1200时 背景颜色为pink*/
@media screen and (min-width: 1200px){
body{
background-color: pink;
}
}
2.如果使用max-width条件判断到时候 条件判断大小 要从大到小写
/*max-width: 1200px:宽度在1200以下*/
@media screen and (max-width: 1200px) {
body {
background-color: green;
}
}
/*max-width: 992px:宽度在992以下*/
@media screen and (max-width: 992px) {
body {
background-color: blue;
}
}
/*max-width: 768px:宽度在768以下*/
@media screen and (max-width: 768px) {
body {
background-color: pink;
}
}
2.3.4 写法的特性有两个向上兼容 只写了小的判断, 大的判断没有写, 但是在大屏幕下也会生效
向下覆盖 同时写了小的判断和大的判断, 满足大的条件会生效大的条件的样式, 大的条件写在后面会把小的条件的样式覆盖
2.3.5 使用媒体查询实现网页布局在大屏幕下显示4列 中屏幕显示3列 小屏幕显示2列 超小屏幕显示1列
/*w 768~992 每一行放置两个子元素 50%*/
@media screen and (min-width: 768px){
.box > p{
width: 50%;
}
}
/* w 992~1200 每一行放置三个子元素 33.33%*/
@media screen and (min-width: 992px){
.box > p{
width: 33.33%;
}
}
/*w >1200 每一行放置四个子元素 25%*/
@media screen and (min-width: 1200px){
.box > p{
width: 25%;
}
}
原理就是通过媒体查询判断条件改变盒子的宽度
3. 响应式开发框架 bootstrap介绍特点：灵活简介，代码优雅，美观大方
好处：bootstrap 让我们的web开发更简单，更快捷
版本：目前市面上使用最多的是3.x.x版本 除此之外还有2.3.2对ie8支持 现已有4.0.0的正式版
相关链接: 中文官网 使用bootstrap构建的网站
4. 库和框架的区别jquery : 库 便捷的dom (你想实现什么功能就调用什么方法)(主导者是你 你调用库)
bootstrap : 框架 界面工具集 框架是他来控制你 (框架制定好了一系列规则 用户按照规则进行编写)可以实现整个网站大多数功能
插件 : fullpage 功能比较单一 只是实现了网页里面的某个或几个功能
5. bootstrap的基本使用5.1 下载: 去bootstrap官网中文官网 的起步里面下载生产环境的bootstrap 解压之后把整个文件夹放到项目里面来 也可以使用bootstrapcdn5.2 引入bootstrap先引入bootstrap的css(如果想要主题可以在引入带主题的css)
再引入自己的css
先引入jquery(因为bootstrap依赖jquery)
再引入bootstrap的js
再引入自己的js
<!doctype html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>bootstrap 101 template</title>
<!-- bootstrap -->
<link href="lib/bootstrap/css/bootstrap.css" rel="stylesheet">
<!-- html5 shiv是为了让低版本ie支持html5新标签 -->
<!-- respond.js是为了让低版本ie支持css3媒体查询 -->
<!-- 但是注意respond.js需要在服务器下运行 就是localhost 不能再file下运行不然无法工作 -->
<!-- 条件注释 ie版本小于ie9 条件成立就执行下面的代码 如果条件不成立就是注释不执行 -->
<!--[if lt ie 9]>
<script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- bootstrap的js插件依赖jquery 所以要先引入jquery -->
<script src="lib/jquery/jquery.min.js"></script>
<!-- 在引入bootstrap的js文件 -->
<script src="lib/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
5.3 引包的顺序先引入第三方的框架
再引入自己的文件
css放到head里面引入(有些特殊的js文件对页面渲染有作用的要放到head中)
js放到body结束标签是上面引入
5.4 视口视口: 浏览器的可视窗口 在pc端是会受到浏览器窗口变化而变化
视口在pc端是可视窗口(会变的) 在移动端有一个固定的值 通常是默认980
但是默认移动端的时候980会造成网页的缩放或者出滚动条
解决移动端默认视口会造成网页缩放和滚动条 设置meta标签设置默认是视口的宽度等于设备的宽度<meta name="viewport" content="width=device-width">
视口的其他属性 初始化缩放 initial-scale=1.0 是否允许用户缩放 user-scalable=no 最大 maximum-scale=1.0 和最小缩放 minimum-scale=1.0
meta:vp+tab 凡是写移动端页面一来就是加上视口
5.5 浏览器兼容模式1.<meta http-equiv="x-ua-compatible" content="ie=edge">
http-equiv=x-ua-compatible 表示设置ie浏览器的兼容模式
content=ie=edge 表示让ie浏览器用最新的渲染引擎渲染页面
6. bootstrap文档6.1 基础css样式概要 (常用)
布局容器
栅格系统 (常用)
xs : 超小屏幕 手机 (.row>col-md-2col-md-5col-md-2col-md-3
字体图标
bootstrap官方图标 组件->字体图标 拷贝图标类名即可
自己生成字体图标 icomoon.io网站生成
引入生成好的字体图标样式文件同时字体文件要放在旁边
相关推荐：
详解前端响应式布局、响应式图片，与自制栅格系统
css3怎么做出响应式布局
如何实现响应式布局
以上就是响应式布局的开发教程实例的详细内容。