响应式设计:Responseive design,就是一个网站,一套代码能在所有终端能够正常展示,并不是为每个终端做一个特定版本,响应式是为解决移动互联网浏览器而诞生的。
2.1、viewport 设置
大多数移动端浏览器都将html页面的宽度作为可视区的视图以符合屏幕分辨率,所以我们需要利用 meta 设置 viewport ,将网页宽度设为设备宽度。
在head中添加meta标签,设置设备的宽度作为视图大小,禁止缩放。代码如下:
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" />
2.2、媒体查询
媒体查询:Media Queries,是响应式布局的核心,浏览器会根据条件选择需要渲染的html和css内容。多种屏幕设备的宽度主要分为四个区间。
超小屏幕 |
小屏幕 |
中等屏幕 |
大屏幕 |
媒体查询有两种引入方式:内部引入和外部引入。
2.2.1、内部引入
/* 手机端样式 */ @media screen and (max-width:768){} /* ipad终端样式 */ @media screen and (min-width:768px) and ( max-width:992px ){} /*笔记本样式*/ @media screen and (min-width:992px) and (max-width:1200px){} /* 台式机大屏 */ @media screen and (min-width:1200px){}
2.2.2、外部引入
/* 手机端样式 */ <link rel="stylesheet" media="screen and (max-width:768px)" /> /* ipad终端样式 */ <link rel="stylesheet" media="screen and (min-width:768px) and ( max-width:992px )" /> /*笔记本样式*/ <link rel="stylesheet" media="screen and (min-width:992px) and (max-width:1200px)" /> /* 台式机大屏 */ <link rel="stylesheet" media="screen and (min-width:1200px)" />
注意:
eg:制作一个展示图片的列表,大屏展示一行4张图片,ipad一行展示3张图片,手机一行展示两张图片。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .list{ width:100%; max-width:1200px; padding:0; margin:0 auto; } .pic{ float:left; list-style:none; box-sizing: border-box; padding:10px; margin:15px 0px; } .picture{ width:100%; height:100px; background:#eaeaea; } @media screen and (max-width:768px) { .pic{ width:50%; } } @media screen and (min-width:768px) and (max-width:992px) { .pic{ width:33%; } } @media screen and (min-width:992px) { .pic{ width:25%; } } </style> </head> <body> <ul class="list"> <li class="pic"><div class="picture"></div></li> <li class="pic"><div class="picture"></div></li> <li class="pic"><div class="picture"></div></li> <li class="pic"><div class="picture"></div></li> <li class="pic"><div class="picture"></div></li> <li class="pic"><div class="picture"></div></li> <li class="pic"><div class="picture"></div></li> <li class="pic"><div class="picture"></div></li> <li class="pic"><div class="picture"></div></li> <li class="pic"><div class="picture"></div></li> <li class="pic"><div class="picture"></div></li> <li class="pic"><div class="picture"></div></li> </ul> </body> </html>
运行以后不断改变浏览器的宽度,图片元素布局会自动改变。
bootstrap框架用的就是媒体查询原理,我们做响应式布局的时候,基本都会借用bootstrap框架提高工作效率。
4.1、优点:
4.2、缺点:
建议你的网站最好分别制作移动端和PC端,这样网站性能、用户体验、用户留存相对来说会好很多。大公司它们的网站都是独立的,很少使用响应式布局。