# 响应式布局

# 响应式开发

# 响应式开发原理

就是使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的

# 响应式布局容器

响应式需要一个父级作为布局容器，来配合子级元素来实现变化效果
原理就是在不同的屏幕下，通过媒体查询来改变这个布局容器的大小，在改变里面元素的排列方式，不同的屏幕下，看到不同的页面布局和样式变化

# Bootstrap 框架

# Bootstrap 简介

Bootstrap 来自 Twitter，是目前最受欢迎的前端框架，Bootstrap 是基于 HTML，CSS，JavaScript 的，它简洁灵活，使得 Web 开发更加快捷
官网：Bootstrap 中文网

# rem 适配布局

# rem 基础

rem （root em）是一个单位，类似于 em，em 是父元素字体的大小
不同的是 rem 的基准是相对于 html 元素的字体大小
比如，根元素（html）设置 font-size=12px；非根元素设置 width:2rem; 换成 px 是 24px

# 媒体查询

# 媒体查询介绍

媒体查询（Media Query）是 CSS3 新语法

使用 @media 查询，可以针对不同的媒体类型定义不同的格式
@meida 可以针对不同的屏幕尺寸设置不同的样式
当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度来重新渲染页面
目前针对很多苹果手机，Android 手机，平板等设备都用到多媒体查询

# 语法规范

	@media mediatype and\|not\|only (media feature) {
	CSS-Code;
	}

用 @media 开头
mediatype 媒体类型
关键字 and not only
media feature 媒体特性必须有小括号包含

# mediatype 查询类型

值	解释说明
all	用于所有设备
print	用于打印机和打印预览
scree	用于电脑屏幕，平板电脑，只能手机等

# 关键字

and	且的意思
not	非得意思
only	指定某个特定得媒体类型，可以省略

# 媒体特性

值	解释说明
width	定义输出设备页面可见区域得宽度
min-width	定义输出设备页面最小可见区域宽度
max-width	定义输出设备中页面最大可见区域宽度

# Less 基础

# Less 介绍

Less 是一门 css 预处理语言，它扩展了 CSS 得动态特性

# Less 使用

Less 变量
Less 编译
Less 嵌套
Less 运算

# Less 变量

@变量名: 值;

# Less 编译

ctrl+s 保存即可完成编译

# Less 嵌套

# 常用选择器嵌套

	.nav {
	.logo {
	width:30px;
	}
	}

# 交集伪类元素选择器

	a {
	&:hover {
	color:red;
	}
	}

# Less 运算

	div {
	width:1px + 2px;
	width:1px - 2px;
	width:1px * 2px;
	width:1px / 2px;
	}

运算符中间左右有两个空格隔开
对于两个不同的单位得值之间得运算，运算结果得值取第一个值得单位
如果两个值只有一个单位，则运算就取该单位

# 移动端 flex 布局

# flex 布局原理

# 布局原理

flex 是 flexible Box 的缩写，意味弹性布局，用来为盒装模型提供最大的灵活性，任何一个容器都可以指定为 flex 布局

当我们为父盒子设置 flex 布局后，子元素的 float，clear，vertical-align 属性失效
通过给父盒子添加 flex 属性，来控制子盒子的位置和排列

# flex 布局父项常见属性

# 常见父项属性

属性名称	属性功能
flex-direction	设置主轴方向
justify-content	设置主轴上的子元素排列方式
flex-wrap	设置子元素是否换行
align-content	设置测轴上的子元素的排列方式（多行）
align-items	设置测轴上的子元素的排列方式（单行）
flex-flow	复合属性，相当于设置了 flex-direction 和 flex-wrap

# flex-direction 设置主轴方向

# 属性值

属性值	说明
row	默认从左到右
row-reverse	从右到左
column	从上到下
column-reverse	从下到上

# justify-content 设置主轴上的子元素排列方式

justify-content 属性定义了项目在主轴上的对齐方式 \

注意：使用这个属性前一定要确定好主轴是哪个

# 属性值

属性值	说明
flex-start	默认值从头开始
flex-end	从尾部开始排列
center	在主轴居中对齐
space-around	平分剩余空间
space-between	先两边贴边在平分剩余空间（重要）

# flex-wrap 设置子元素是否换行

默认情况下，项目都排在一条线上，flex-wrap 属性定义，flex 布局中默认不换行

# 属性值与说明

属性值	说明
nowrap	默认值，不换行
wrap	换行

# align-items 设置测轴上的子元素排列方式（单行）

该属性是控制子项在测轴上的排列方式，在子项为单项时使用

# 属性值及说明

属性值	说明
flex-start	从上到下
flex-end	从下到上
center	挤在一起居中（垂直居中）
stretch	拉伸

# align-content 设置测轴上的子元素排列方式（多行）

设置子项在测轴上的排列方式，并且只能用于子项出现换行的情况，单行下无效

# 属性值和说明

属性值	说明
flex-start	默认值从测轴的头部开始排列
flex-end	在测轴的尾部开始排列
center	在测轴中间显示
space-around	子项在测轴平分剩余空间
space-between	子项在测轴先分布在两头，再平分其他空间
stretch	设置子项元素高度平分父元素高度

# flex-flow

就是 flex-direction 和 flex-wrap 属性的复合属性

flex-flow: row wrap;

# flex 布局子项常见属性

# flex 属性（重要）

flex 属性定义子项分配的剩余空间，用 flex 来表示占多少份

flex: 1;

# align-self 控制子项自己再测轴上的排列方式

	span {
	align-self: flex-end;
	}

# order 属性定义项目的排列顺序

数值越小，排列越靠前，默认为 0
注意：和 z-index 不一样

# 移动端流式布局

# 视口

# 分类

布局视口
视觉视口
理想视口

# meta 视口标签

# 语法

<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">

# 属性说明

属性	解释说明
width	宽度设置的是 viewport 宽度，可以设置 device-width 的特殊值
initial	初始缩放比，大于 1 的数字
maximum-scale	最大缩放比
minimum	最小缩放比
user-scalable	用户是否可以缩放，yes 或 no（1 或 0）

# 二倍图

# 物理像素和物理像素比

物理像素指的是屏幕显示的最小颗粒，就是我们所说的分辨率
物理像素与开发像素不对等

# 多倍图

对于一张 50px*50px 的图片，再手机 Retina 屏中打开，按照刚才的物理像素辉放大倍数，这样会造成图片模糊
在标准的 viewport 设置中，使用倍图来提高图片质量，解决在高清设备中的模糊问题
通常采用二倍图

# 代码解决

	img {
	width: 50px;
	height: 50px;
	}
	<body>
	<img src="images/apple100.jpg" alt="">
	</body>

# 背景缩放 background-size

# 代码

	background-size:100px 100px; //设置宽度和高度
	background-size:100px; //设置宽度为100px 高度等比例缩放
	background-size:50%; //相对于父盒子来说
	background-size:cover; //要完全覆盖父盒子
	background-size:contain; //当高度或者宽度和父盒子一样宽，便不再拉伸

# 移动端开发选择

# 单独移动端页面（主流）

通常情况下，网址域名前加 m（mobile）可以打开移动端，通过判断设备，如果移动端打开，则需要打开移动端页面

# 响应式兼容 PC 移动端

通过判断屏幕宽度来改变样式，以适应不同的终端

# 移动端技术解决方案

# 移动端浏览器

移动端浏览器基本以 webkit 内核为主，因此一般不用考虑兼容性问题

# CSS 初始化 normalize.css

移动端初始化推荐使用 normalize.css

保护了有价值的默认样式
修复了浏览器的 bug
是模块化的
拥有详细的文档

# CSS3 盒子模型 box-sizing

不考虑内边距外边框的影响，省去传统盒子的计算

# 特殊样式

	-webkit-box-sizing: border-box; //c3盒子模型
	-webkit-tap-hgight-color: transparent; //点击高亮我们需要清除，设置为transparent
	-webkit-appearance: none; //在移动端浏览器默认的外观在IOS上加这个属性才能给按钮和输入框输入自定义样式
	-webkit-touch-callout:none; //禁止长按页面时弹出菜单

# 移动端常见布局

# 流式布局（百分比布局）

流式布局，就是百分比布局，也称非固定像素布局
通过盒子的宽度设置成百分比来根据屏幕的宽度进行伸缩，不受固定像素限制，内容向两侧填充
流式布局方式是移动 web 开发使用比较常见的布局方式
max-width：最大宽度（max-height 最大高度）
min-width：最小宽度（min-height 最小高度）

CSS

# 响应式布局

# 响应式开发

# 响应式开发原理

# 响应式布局容器

# Bootstrap 框架

# Bootstrap 简介

# rem 适配布局

# rem 基础

# 媒体查询

# 媒体查询介绍

# 语法规范

# mediatype 查询类型

# 关键字

# 媒体特性

# Less 基础

# Less 介绍

# Less 使用

# Less 变量

# Less 编译

# Less 嵌套

# 常用选择器嵌套

# 交集伪类元素选择器

# Less 运算

# 移动端 flex 布局

# flex 布局原理

# 布局原理

# flex 布局父项常见属性

# 常见父项属性

# flex-direction 设置主轴方向

# 属性值

# justify-content 设置主轴上的子元素排列方式

# 属性值

# flex-wrap 设置子元素是否换行

# 属性值与说明

# align-items 设置测轴上的子元素排列方式（单行）

# 属性值及说明

# align-content 设置测轴上的子元素排列方式（多行）

# 属性值和说明

# flex-flow

# flex 布局子项常见属性

# flex 属性（重要）

# align-self 控制子项自己再测轴上的排列方式

# order 属性定义项目的排列顺序

# 移动端流式布局

# 视口

# 分类

# meta 视口标签

# 语法

# 属性说明

# 二倍图

# 物理像素和物理像素比

# 多倍图

# 代码解决

# 背景缩放 background-size

# 代码

# 移动端开发选择

# 单独移动端页面（主流）

# 响应式兼容 PC 移动端

# 移动端技术解决方案

# 移动端浏览器

# CSS 初始化 normalize.css

# CSS3 盒子模型 box-sizing

# 特殊样式

# 移动端常见布局

# 流式布局（百分比布局）

HTML

CSS基础