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计算

css布局－响应式布局

猜你喜欢