移动WEB开发之响应式布局_前端响应式开发-程序员宅基地
技术标签： html5 前端 html5+ccs3基础 css3
一、移动web开发响应式布局导读
二、响应式开发原理
三、响应式布局容器
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>响应式布局原理</title>
<style>
.container {
height: 150px;
background-color: pink;
margin: 0 auto;
}
/* 1. 超小屏幕下 小于 768 布局容器的宽度为100% */
@media screen and (max-width: 767px) {
.container {
width: 100%;
}
}
/* 2. 小屏幕下 大于等于768 布局容器改为 750px */
@media screen and (min-width: 768px) {
.container {
width: 750px;
}
}
/* 3. 中等屏幕下 大于等于992px 布局容器改为 970px */
@media screen and (min-width: 992px) {
.container {
width: 970px;
}
}
/* 4. 大屏幕下 大于等于1200 布局容器修改为 1170 */
@media screen and (min-width: 1200px) {
.container {
width: 1170px;
}
}
</style>
</head>
<body>
<!-- 响应式开发里面，首先需要一个布局容器 -->
<div class="container"></div>
</body>
</html>
四、响应式导航案例
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>响应式导航</title>
<style>
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
.container {
width: 750px;
margin: 0 auto;
}
.container ul li {
float: left;
width: 93.75px;
height: 30px;
background-color: green;
}
@media screen and (max-width: 767px) {
.container {
width: 100%;
}
.container ul li {
width: 33.33%;
}
}
</style>
</head>
<body>
<div class="container">
<!-- ul>li{导航栏}*8 -->
<ul>
<li>导航栏</li>
<li>导航栏</li>
<li>导航栏</li>
<li>导航栏</li>
<li>导航栏</li>
<li>导航栏</li>
<li>导航栏</li>
<li>导航栏</li>
</ul>
</div>
</body>
</html>
五、Bootstrap前端开发框架
1.Bootstrap简介
https://www.bootcss.com/
https://getbootstrap.com/
2. Bootstrap使用
（1）创建文件夹结构
（2）创建html骨架结构
（3）引入相关样式文件
（4）书写内容
3.Bootstrap布局容器
4.Bootsrap栅格系统
（1）bootstrap栅格系统简介
（2）bootstrap栅格系统的使用
栅格选项参数
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--[if lt IE 9]>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/html5shiv.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dest/respond.min.js"></script>
<![endif]-->
<!-- 一定不要忘记引入bootstrap 的样式文件 -->
<!-- bootstrap文件要和html文件建立在一个目录下，不然引用不了 -->
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<title>Document</title>
<style>
[class^="col"] {
border: 1px solid #ccc;
}
.container .row:nth-child(5) {
background-color: pink;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<!-- div{$}*4 -->
<div class="col-lg-3">1</div>
<div class="col-lg-3">2</div>
<div class="col-lg-3">3</div>
<div class="col-lg-3">4</div>
</div>
<!-- 如果孩子的份数相加等于12 则孩子能占满整个container的宽度 -->
<div class="row">
<!-- div{$}*4 -->
<div class="col-lg-6">1</div>
<div class="col-lg-2">2</div>
<div class="col-lg-2">3</div>
<div class="col-lg-2">4</div>
</div>
<!-- 如果孩子的份数相加小于12 则孩子不能占满整个container的宽度 会有空白 -->
<div class="row">
<!-- div{$}*4 -->
<div class="col-lg-6">1</div>
<div class="col-lg-2">2</div>
<div class="col-lg-1">3</div>
<div class="col-lg-1">4</div>
</div>
<!-- 如果孩子的份数相加大于12 则多出的部分那一列会另起一行显示 -->
<div class="row">
<!-- div{$}*4 -->
<div class="col-lg-6">1</div>
<div class="col-lg-2">2</div>
<div class="col-lg-2">3</div>
<div class="col-lg-3">4</div>
</div>
<!-- 一个盒子可以添加多个类名 -->
<div class="row">
<!-- div{$}*4 -->
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">1</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">2</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">3</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">4</div>
</div>
</div>
</body>
</html>
5.Bootstrap列嵌套
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--[if lt IE 9]>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/html5shiv.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dest/respond.min.js"></script>
<![endif]-->
<!-- 一定不要忘记引入bootstrap 的样式文件 -->
<!-- bootstrap文件要和html文件建立在一个目录下，不然引用不了 -->
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<title>Document</title>
<style>
.row>div {
height: 50px;
background-color: pink;
/* 如果想要空隙，一定不能加margin值，因为它实现划分的原理是每一份占33.3%，如果加了margin值他会掉下来的 */
/* margin: 0 10px; */
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4">
<!-- 小盒子也是一共占12份（把父盒子看成12等份） -->
<!-- 我们列嵌套最好加1个行 row 这样小盒子才是顶着父元素开始划分的（这样可以取消父元素的padding值）而且高度自动和父盒子一样高 -->
<div class="row">
<div class="col-md-6">a</div>
<div class="col-md-6">b</div>
</div>
</div>
<div class="col-md-4">2</div>
<div class="col-md-4">3</div>
</div>
</div>
</body>
</html>
6.Bootstrap列偏移
方案1：给一个margin:right值（pass）
因为这是一个响应式的网页，不知道给margin具体多大的值。
方案二：一个盒子占四份，剩下四份空白会在右侧盒子右边（pass）
方案三：分成三个盒子，第一个盒子占4份，第二个空盒子占4份，第三个盒子占4份
方案四：右侧盒子右偏移（它本质上也是给盒子加了一个外边距，只不过这个外边距是浏览器给我们算出来的）
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--[if lt IE 9]>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/html5shiv.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dest/respond.min.js"></script>
<![endif]-->
<!-- 一定不要忘记引入bootstrap 的样式文件 -->
<!-- bootstrap文件要和html文件建立在一个目录下，不然引用不了 -->
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<title>Document</title>
<style>
.row div {
height: 50px;
background-color: pink;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4">左侧</div>
<!-- 偏移的份数就是12-两个盒子的份数 -->
<div class="col-md-4 col-md-offset-4">右侧</div>
</div>
<div class="row">
<!-- 所有盒子默认都是贴左侧对齐的 -->
<!-- 如果只有一个盒子要居中对齐 偏移=（12-盒子份数）/2 -->
<div class="col-md-8 col-md-offset-2">中间盒子</div>
</div>
</div>
</body>
</html>
7.Bootstrap列排序
原理：把右侧的盒子往左边拉，把左侧的盒子往右边推
8.Bootstrap响应式工具
响应式工具
淘宝：
大屏
小屏
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--[if lt IE 9]>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/html5shiv.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dest/respond.min.js"></script>
<![endif]-->
<!-- 一定不要忘记引入bootstrap 的样式文件 -->
<!-- bootstrap文件要和html文件建立在一个目录下，不然引用不了 -->
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<title>Document</title>
<style>
.row div {
height: 300px;
background-color: purple;
}
.row div:nth-child(3) {
background-color: pink;
}
span {
font-size: 50px;
color: #fff;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-3">
<span class="visible-lg">我会显示哦</span>
</div>
<div class="col-xs-3">2</div>
<div class="col-xs-3 hidden-md hidden-xs">灰白糯米藕书</div>
<div class="col-xs-3">4</div>
</div>
</div>
</body>
</html>
智能推荐
sql server异地备份_sql2008r2 异地备份-程序员宅基地
文章浏览阅读562次。服务器名为：jiliangserver 备份的数据库为：JLSDB declare @strsql varchar(1000) declare @strdirname varchar(50) declare @strcmd varchar(50) dec_sql2008r2 异地备份
postfix报错postfix: fatal: parameter inet_interfaces: no local interface found for ::1_postfix[2649]: fatal: parameter inet_interfaces: n-程序员宅基地
文章浏览阅读4.1k次。From: http://blog.csdn.net/xiangshanqishi/article/details/23439397启动postfix出错，查看centos中的postfix日志more /var/log/maillogpostfix: fatal: parameter inet_interfaces: no local interface found f_postfix[2649]: fatal: parameter inet_interfaces: no local interface found fo
【二维树状数组】POJ 1195_poj1195-程序员宅基地
文章浏览阅读468次。求和的时候注意容斥原理ans = sum(x2,y2)-sum(x1-1,y2)-sum(x2,y1-1)+sum(x1-1,y1-1);#define N 1100int c[N][N];int lowbit(int x){ return x&(-x);}void add(int i,int j,int x){ int tmp; while(i
基于VUE的校园二手物品交易管理系统的设计与实现 （含源码+sql+视频导入教程）_二手商品交易管理系统-程序员宅基地
文章浏览阅读2.2k次，点赞49次，收藏45次。基于VUE的校园二手物品交易管理系统8拥有两种角色管理员：闲置物品管理、订单管理、用户管理用户：登录注册、购物车、发布闲置物品、评论、发货、收货地址管理等_二手商品交易管理系统
numpy.random.uniform介绍-程序员宅基地
文章浏览阅读10w+次，点赞109次，收藏440次。numpy.random.uniform介绍：1. 函数原型： numpy.random.uniform(low,high,size)功能：从一个均匀分布[low,high)中随机采样，注意定义域是左闭右开，即包含low，不包含high._numpy.random.uniform
关系型数据库&非关系型数据库概述_关系型数据库与非关系型数据库可以共用吗-程序员宅基地
文章浏览阅读6k次，点赞15次，收藏97次。数据库的英文单词： DataBase 简称 ： DB。用于存储和管理数据的仓库，本质上是一个文件系统，还是以文件的方式存在服务器的电脑上的。_关系型数据库与非关系型数据库可以共用吗
随便推点
el-input输入保留两位小数_el-input保留两位小数-程序员宅基地
文章浏览阅读1k次。el-input输入保留两位小数_el-input保留两位小数
MyBatis多条件查询_mybatis if test 多条件-程序员宅基地
文章浏览阅读1.8k次。在MyBatis中进行多条件查询可以使用动态SQL来构建查询语句。_mybatis if test 多条件
Chrome 您的连接不是私密连接 解决办法_chrome您的连接不是私密连接-程序员宅基地
文章浏览阅读1.9w次，点赞8次，收藏25次。您的连接不是私密连接今天打开b站出现不是私密连接被拦截的情况，试了网上好多种方法都没有效果，最后刷新DNS给解决了，特此记录一下先附上错误截图攻击者可能会试图从 x.x.x.x 窃取您的信息（例如：密码、通讯内容或信用卡信息）。了解详情NET::ERR_CERT_INVALID将您访问的部分网页的网址、有限的系统信息以及部分网页内容发送给 Google，以帮助我们提升 Chrome 的安全性。隐私权政策x.x.x.x 通常会使用加密技术来保护您的信息。Google Chrome 此次尝试连接到_chrome您的连接不是私密连接
让Jenkins帮你自动布署Vue项目-程序员宅基地
文章浏览阅读177次。作者:zhou_webhttps://segmentfault.com/a/1190000019212628实现目标本地push代码到GitHub，Webhook自动触发jenkins..._jenkins配置generic webhook trigger 自动部署vue项目
WEB服务器端技术_简单、持续的客户端状态来 基于 web 的客户端 务器 用。服务器在向客户端 由-程序员宅基地
文章浏览阅读1w次，点赞4次，收藏23次。WEB服务器端技术客户端是与用户交互的唯一接口，对于软件测试人员来说不可掉以轻心，那么服务器端又需要我们了解哪些技术呢？事实上，对于Web系统来说，相比于客户端技术，服务器端技术更是深不可测，其各类技术，系统架构，处理方式等千变万化。服务器端的技术进步，同样要求软件测试技术的同步前进，也更加要求软件测试人员能够跟上技术的步伐，否则测试将很难开展。虽然服务器端技术很复杂，作为测试人员，我们不能望而却步，否则我们的测试如何进步？本节就来为大家作一个整体的梳理，将服务器端的各类技术作一个总结：WW_简单、持续的客户端状态来 基于 web 的客户端 务器 用。服务器在向客户端 由
google地图api之简单轨迹（四）_谷歌地图轨迹api例子-程序员宅基地
文章浏览阅读2.4k次。<!DOCTYPE html><html><head runat="server"> <title>google地图轨迹</title> <style type="text/css"> #map_canvas { width: auto; ..._谷歌地图轨迹api例子