css布局－响应式布局
响应式设计
.在不同设备上正常使用
.一般主要处理屏幕大小问题
.主要方法：
.隐藏 ＋ 折行 ＋ 自适应空间
.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计算
