1.慕客协作平台

1. /摹客官网地址： https://www.mockplus.cn/ 注册一个账号

2. 下载moke ps插件

3. PS 安装/摹客/蓝湖插件

3. 打开PS/摹客/蓝湖插件

4. 上传（需要切图，需要先标注切图）

5. 查看项目

6. 邀请成员进入（分享按钮，链接地址）

2.利用git提交网站到码云

3.利用web开发响应式布局

响应式需要一个父级作为布局容器，来配合自己元素实现变化效果

在不同屏幕下，通过媒体查询来改变布局容器的大小，再改变子元素的排列方式和大小，从而实现不同屏幕下，看到不同的页面布局和样式变化

3.1响应式尺寸划分container类

超小屏幕（小于768px）：设置宽度为100%

小屏幕（大于等于768px）:设置宽度为750px

中等屏幕（大于等于992px）：宽度设置为970px

大屏幕（大于等于1200px）：宽度设置为1170px

3.2 container-fluid类

流式布局容器百分百宽度

占据全部视口(viewport)的容器

适合于单独做移动端开发

4.Bootstrap前端开发框架

http://www.bootcss.com/

它有一套比较完整那个的网页功能解决方案，而且控制权在框架本身，有预制样式库、组件和插件。使用者要按照框架所规定的某种规范进行开发

标准化的html+css规范

提供了一套简洁、直观、强悍的组件

有自己的生态圈，不断的更新迭代

提高了开发效率

<!-- 要求当前网页使用IE浏览器最高版本的内核来渲染 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">

4.1Bootstrap栅格系统

将页面布局划分为等宽的列，然后通过列数的定义来模块化页面布局

Bootstrap提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口尺寸的增加，系统会自动分为最多12列

Bootstrap里面container宽度是固定的，但是不同屏幕下，container的宽度不同

	超小屏幕<768px	小屏设备>=768px	中等屏幕>=992px	宽屏设备>=1200px
.container	自动(100%)	750px	970px	1170px
类前缀	.col-xs-	.col-sm-	.col-md-	.col-lg-
列(coloum)数	12

行必须放到container布局容器里面

列的平均划分需要给列添加类前缀

xs-extra small:超小；sm-small：小；md-medium:中等;lg-large:大

列大于12，多余的列所在的元素将被作为一个整体另起一行排列

每一列默认有左右15像素的padding

可以为同一列指定多个设备的类名

<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"><!-- 解决IE9以下浏览器对html5新增标签的不识别 --><!-- 解决IE9以下浏览器对css3 Media的不识别 --><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><!-- 引入bootstrap 样式文件 --><link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"><!-- 引入我们自己的首页样式文件 --><link rel="stylesheet" href="css/index.css"><title>Document</title><style>[class^="col"] {border: 1px solid #ccc;}.row:nth-child(1) {background-color: pink;}</style>
</head><body><div class="container"><div class="row"><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><!-- 如果孩子的份数相加等于12，则孩子能占满整个的container宽度 --><div class="row"><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 class="col-lg-6">1</div><div class="col-lg-2">2</div><div class="col-lg-2">3</div><div class="col-lg-1">4</div></div><!-- 如果孩子的份数相加 大于 12 则会？多于的那一列会 另起一行显示  --><div class="row"><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>
</body>

4.2列嵌套

<body><div class="container"><div class="row"><div class="col-md-4"><!-- 我们列嵌套最好加1个行 row 这样可以取消父元素的padding值 而且高度自动和父级一样高 --><div class="row"><div class="col-md-4">a</div><div class="col-md-8">b</div></div></div><div class="col-md-4">2</div><div class="col-md-4">3</div></div></div>
</body>

4.3列偏移

<body><div class="container"><div class="row"><div class="col-md-3">左侧</div><!-- 偏移的份数 就是 12 - 两个盒子的份数 = 6 --><div class="col-md-3 col-md-offset-6">右侧</div></div><div class="row"><!-- 如果只有一个盒子 那么就偏移 = (12 - 8) /2 --><div class="col-md-8 col-md-offset-2">中间盒子</div></div></div>
</body>

4.4列排序

<body><div class="container"><div class="row"><div class="col-md-4 col-md-push-8">左侧</div><div class="col-md-8 col-md-pull-4">右侧</div></div></div>
</body>

4.5响应式工具

类名	超小屏	小屏	中屏	大屏
.hidden-xs	隐藏	可见	可见	可见
.hidden-sm	可见	隐藏	可见	可见
.hidden-md	可见	可见	隐藏	可见
.hidden-lg	可见	可见	可见	隐藏

<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><!-- 一定不要忘记引入bootstrap 的样式文件 --><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>

vw和vh

vw和vh是一个相对单位，vw是视口宽度单位；vh是视口高度单位；

相对视口的尺寸计算结果是1vw=1/100视口宽度；1vh=1/100视口高度

当前屏幕视口是375像素，则1vw就是3.75像素

百分比则是相对于父元素来说的

响应式布局以及提交网站相关推荐

总是听别人说响应式布局，原来这么简单
总听别人说响应式布局,觉得是一个很高大上的东西,近日做的一个项目需要适配不同的屏幕尺寸,于是就简单研究了一下 Web响应式布局,其实原理很简单,下面就简单整理了一下分享给大家. 什么是响应式布局如图 ...
html怎么做成响应式的,怎么用html5完成响应式布局？
怎么用html5完成响应式布局?以下文字资料是由(历史新知网www.lishixinzhi.com)小编为大家搜集整理后发布的内容,让我们赶快一起来看一下吧! 怎么用5完成响应式布局? 步骤1 建立空 ...
响应式布局的实现方法
响应式布局可以让网站同时适配不同分辨率的屏幕,让客户有更好的体验.一共有以下五种方法实现响应式布局: 1.百分比布局. 2.媒体查询布局. 3.rem响应式布局. 4.vw响应式布局. 5.flex弹 ...
Bootstrap实战 - 响应式布局
一.介绍响应式布局就是一个网站能够兼容多个终端,而不是为每个终端做一个特定的版本.这个概念是为解决移动互联网浏览而诞生的. 导航栏与轮播在大部分网站的头部占很高的比重,特别是导航栏,扮演着网站地图的 ...
html响应式弹性布局,CSS3响应式布局之弹性盒子
CSS3弹性盒模型可以轻松的创建自适应浏览器流动窗口的布局或自适应字体大小的布局.同时该盒子决定了一个盒子在其他盒子的分布方式,及如何处理可用的空间. 自己写了一个弹性盒子的demo: 主要HTML代 ...
响应式布局，弹性布局
响应式 Web 设计 - Viewport 响应式布局是一个网站能够兼容多个终端--而不是为每个终端做一个特定的版本. 优点: 面对不同分辨率设备灵活性强能够快捷解决多设备显示适应问题缺点: 兼容 ...
17款响应式布局框架
响应式页面设计的运用越来越广泛,做为一名WEB前端开发人员,我们有必要了解更多相关的响应式布局的工具和资源,从而使我们更容易地创建具有响应式布局特性的网站,今天就为大家分享几款响应式布局框架吧. 1. ...
10.CSS3弹性布局、响应式布局、PS
响应式 Web 设计 - Viewport 响应式布局是一个网站能够兼容多个终端--而不是为每个终端做一个特定的版本. 优点: 面对不同分辨率设备灵活性强能够快捷解决多设备显示适应问题缺点: 兼容 ...
Web响应式布局设计简介
随着移动互联的到来,市面上的移动终端设备越来越多屏幕尺寸也大小不一.就拿苹果的iPhone来说就有多个不同尺寸的版本,还有iPad也是随着技术的进步屏幕大小.分辨率也在变化.更不用说基于开源Andro ...

响应式布局以及提交网站