响应式网页设计
将弹性布局、弹性图片、媒体和媒体查询三种已有的开发技术整合起来，并命名响应式网页设计
媒体类型
常遇到的媒体类型是
All（全部）
Screen（屏幕）
Print（页面打印或打印预览模式）
实际上媒体类型不止这三种，W3C共列出10种媒体类型
值 设备类型
All 所有设备
Braille 盲人用点字法触觉回馈设备
Embossed 盲人打印机
Handheld 便携设备
Print 打印用纸或打印预览视图
Projection 各种投影设备
Screen 电脑显示器
Speech 语音或音频合成器
Tv 电视机类型设备
Tty 使用固定密度字母栅格的媒介，比如电传打字机和终端
媒体类型的引入方式
内部引入及样式设置
@media 媒体类型 and （媒体特性）{ CSS样式}
例：@media screen and （max-width：1200px）and (minx-width：800px）{样式代码…}
媒体类型为电脑屏幕,样式在屏幕宽度大于等于800px且小于等于1200px生效
and：同时满足这两者时生效，到达限定范围
css外部样式引用法：
link方法
<link rel="stylesheet" href="style.css" media=" screen and （max-width：1200px）and (minx-width：800px）" />
only：指定某种特定的媒体类型，可以用来排除不支持媒体查询的浏览器
<link href = "style.css" media = " only screen
and (max-width：500px) " />
课外知识：
visibility:hidden;隐藏保留原位置，直接在元素后面加hidden,也有同样效果；
display:none;隐藏但不会保留原位置。
最大宽度与最小宽度：
max-width:可以设置最大宽度，超出限制，则只显示最大宽度；
min-width:可以设置最小宽度，缩小超出最小宽度，则按照最小宽度显示并且会显示滚动条；
min只决定下限，max决定上限：一般用于给html设置最小宽度，以保证用户在x轴缩小页面时，页面不会塌陷出现异常，设置最小宽度，缩小时会出现滚动条，以保证页面正常显示。可结合京东pc端首页查看
如何设置全屏样式
百分比法：
要想盒子高度布满整屏高度，必须把他的父元素的高度都设置成100%
Vw& Vh
vw:可视区的宽度单位，100vw;把整个屏幕的宽度分成100份
vh:可视区的高度单位，100vh;把整个屏幕的高度分成100份
百分比%与vw、vh对比：
100vw，只是表示屏幕的宽度，只能展示电脑一屏的宽度即可视范围内，不能覆盖父盒子
100vh，只是表示屏幕的高度，只能展示电脑一屏的高度即可视范围内，不能撑满父盒子；
百分比才能占据整个盒子（固定的高度）
移动端页面布局
水平居中
行内元素：text-align: center;
块级元素：margin:0 auto;
也可通过绝对定位实现水平垂直居中：
盒子设置宽度情况下适用
设置固定宽度的第一种
.center {
width: 960px;
height: 960px;
position: absolute;
left: 50%;
top:50%;
margin-left: -480px;(盒子高的一半)
margin-top:-480px;(盒子高的一半)
}
设置固定尺寸的第二种：针对IE低版本浏览器不支持css样式的时候
.center {
position: absolute;
left：0；
right:0;
top:0;
buttom:0;
margin:auto;
width:300px;
height:300px;
}
盒子没有设置宽度文本内容自适应块级元素
.content {
position: absolute;
left: 50%;
top:50%;
transform: translateX(-50%)translateY(-50%);向左向上移动自身宽度的一半
Flex实现垂直居中
移动端开发中最佳的解决方案
父元素需要设置高度，子元素可不设宽高
.content {
display: flex;
justify-content: center;
align-items: center;
}
垂直居中
单行文本：line-height;
多行文本：通过padding实现，结合text-align:justify;
如盒子设置高度，文本内容垂直居中
表格方式：
第一种：
第二种：
