响应式设计
.在不同设备上正常使用
.一般主要处理屏幕大小问题
.主要方法：
.隐藏 ＋ 折行 ＋ 自适应空间
.rem/viewport/media query
第一个案例
<!DOCTYPE html>
<html lang="en">
<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">
<title>Document</title>
</head>
<style>
.container{
margin: 0 auto;
max-width: 800px;
display: flex;
border: 1px solid black;
}
.left{
width: 200px;
background: red;
margin: 5px;
}
@media (max-width:640px) {
.left{
display: none;
}
}
.right{
flex: 1;
background: blue;
margin: 5px;
}
</style>
<body>
<div class="container">
<div class="left">
这是一些不重要的内容，比如友情链接、广告
</div>
<div class="right">
这里是一些重要的内容，比如一篇文章，文章是整个核心内容。
这里是一些重要的内容，比如一篇文章，文章是整个核心内容。
</div>
</div>
</body>
</html>
head里面有一句viewport(第三点)。这个viewport的含义是什么呢，这里面有一个width=device-width。就是说我们可视区域大小就等于屏幕大小。否者手机端，比如iphone上面会默认页面宽度是980。所以一点点屏幕要显示980的内容，内容就会被缩小很多。这个案例也同时看到media query是怎么使用的。
第二个案例
<!DOCTYPE html>
<html lang="en">
<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">
<title>Document</title>
</head>
<style>
.container{
margin: 0 auto;
max-width: 800px;
border: 1px solid black;
}
.intro{
display: inline-block;
width: 180px;
height: 180px;
line-height: 180px;
text-align: center;
border-radius: 90px;
border: 1px solid red;
margin: 7px;
}
@media(max-width:640px){
.intro{
margin: 7px auto;
display: block;
}
}
</style>
<body>
<div class="container">
<div class="intro">介绍1</div>
<div class="intro">介绍2</div>
<div class="intro">介绍3</div>
<div class="intro">介绍4</div>
</div>
</body>
</html>
这个案例就是折行的方式自适应。但是我们注意到另外一个问题，就是屏幕大小不管多大，我们的文字和圆圈都是那么大，当屏幕小的时候，会挤压空白区域，文字和圈圈的占比就会变大。可不可以采用等比例的方式呢。这种是可以的。
首先一种是media query。比如demo1，已经讲过了
另外一种就是改变viewport的值。width=320。这样iphone5就是320。其它的都以320为基准。比如切到iphone6就放大了。
第三种使用rem的方式
<!DOCTYPE html>
<html lang="en">
<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">
<title>Document</title>
</head>
<style>
html{
font-size: 20px;
}
.container{
margin: 0 auto;
max-width: 800px;
border: 1px solid black;
}
.intro{
display: inline-block;
width: 9rem;
height: 9rem;
line-height: 9rem;
text-align: center;
border-radius: 4.5rem;
border: 1px solid red;
margin: 0.3rem;
}
@media (max-width: 375px) {
html{
font-size: 24px;
}
}
@media (max-width: 320px) {
html{
font-size: 20px;
}
}
@media(max-width:640px){
.intro{
margin: 0.3rem auto;
display: block;
}
}
</style>
<body>
<div class="container">
<div class="intro">介绍1</div>
<div class="intro">介绍2</div>
<div class="intro">介绍3</div>
<div class="intro">介绍4</div>
</div>
</body>
</html>
rem的方式是基于html里面的font-size进行计算。这里是1rem=20px。那么之前的180px就是2rem。90px就是4.5rem。那么针对不同屏幕，我们可以改变font-size的基准达到字体大小的变化。这里要注意大屏的要放上面，小屏的放下面。不然按覆盖原则始终用的是下面的。第二个要注意的是rem是不精确的，在换算的过程中可能存在小数，是除不尽的。所以对于精确度要缺十分高的屏幕，不要使用rem布局
第四种js计算