也叫响应式布局,响应式开发
实现不同屏幕分辨率的终端上浏览网页的不同展示方式。
响应式布局是根据设备屏幕宽度不同适当调整标签显示的布局,从而在每种设备屏幕宽度下呈现的界面是不同的
响应式布局
原理:
-
一个网站适配所有终端,实现不同屏幕分辨率下的终端上网页的不同布局;
-
使用媒体查询针对不同宽度的设备进行布局和样式的设置,从而达到适配不同屏幕的目的
简单的说:
响应式布局是元素随着屏幕发生宽高大小变化 + 盒子布局发生变化
自适应:元素随着屏幕发生宽高大小变化
优缺点
优点:
-
1、减少工作量,网站、设计、代码、内容都只需要一份,多出来的工作量只是JS脚本、CSS样式做一些改变
-
2、节省设计、开发、维护成本【不再特定的维护PC页面,移动页面】
-
3、面对不同分辨率设备灵活性强,能够快捷解决多设备显示适应问题
缺点:
-
1、兼容问题(IE8以下不支持)
-
2、需要加载更多的样式和脚本文件
-
3、代码累赘,会出现隐藏无用的元素,加载时间加长
-
4、页面设计比较难于精确定位和控制
-
5、影响用户体验(一定程度上改变了网站原有的布局结构,会出现用户混淆的情况,)
Bootstrap框架、苹果官网和星巴克官网使用的响应式布局
2、响应式需要的技术 :
1.设置视口标签
2.使用媒体查询
3.响应字体
4.响应图片
5.采用百分比
一、媒体查询
1、标签设置
meta标签的设置
1.虚拟窗口:创建虚拟窗口,自定义窗口的大小和缩放功能,能适应移动设备的屏幕大小
<meta name="viewport" content="width=device-width, initial-scale=1.0">
2.使用高版本的IE内核浏览器或者Chrome浏览器
<meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1"> http-equiv = "X-UA-Compatible": 这个是针对ie8以上浏览器的一个属性,ie8以下无法识别。就是说ie8以上浏览器遇到这个属性会执行content的描述,大小写不敏感。
2、使用媒体查询适配对应样式
可以根据设备显示器的特性,来设置不同的css的样式
二、媒体查询的引入方式和语法
1、媒体查询的语法
媒体查询的语法: @media mediaType and (media feather) { 选择器 { 属性名:属性值 } } 多个条件: @media mediaType and (media feather) and (media feather){ 选择器 { 属性名:属性值 } } mediaType:设备类型 media feather:媒体特性表表达式 1.mediaType设备类型: all:所有的多媒体设备 print:打印机或打印预览 screen:电脑屏幕、平板电脑、智能手机等 speech:屏幕阅读器等发声设备 2.media feather:媒体特性表达式 width:浏览器的宽度 height:浏览器的高度 max-width:最大宽度 min-width:最小宽度 device-width:设备宽度 device-height:设备高度 max-device-width:最大设备宽度 min-device-width:最小设备宽度 orientation:设备的窗口朝向 1.横屏 宽度比高度大 orientation:landscape; 2.竖屏 高度比宽度大 orientation:portrait; 3.操作符 - and(与、和) not: not是用来排除掉某些特定的设备的,比如 @media not print(非打印设备) only: 用来定某种特别的媒体类型。 /* 除了 speech 设备都可以用*/ @media not speech { body { background-color: tomato; } } /* 只能在screen设备能用 */ @media only screen { body { background-color: yellowgreen; } }
-
媒体查询小案例--只在打印设备显示
<style> .txt { font-size: 30px; display: none; } 媒体查询 打印设备 @media print { .txt { display: block; } } display: none; 隐藏元素 display: block; 显示元素 </style> <body> <p class="txt">你看不见我,只能在打印设备才能看的见我哦</p> </body>
2、媒体查询的引入方式
1.内部方式引入
<style> body { background-color: red; } 横屏:宽大于高 @media screen and (orientation: landscape) { body { background-color: yellow; } } 竖屏:高大于宽 @media screen and (orientation: portrait) { body { background-color: pink; } } </style>
2.外链式
在html的head标签的内部使用link标签引入外部的css文件(后缀名为.css的文件) <head> <link rel="stylesheet" href="./css/demo.css"> </head> body { background-color: pink; } /* 横屏 宽大于高 */ @media screen and (orientation: landscape) { body { background-color: tomato; } } /* 竖屏 高大于宽 */ @media screen and (orientation: portrait) { body { background-color: yellowgreen; } } <!-- 只有横屏时有样式 --> <link rel="stylesheet" href="./css/demo.css" media="screen and (orientation: landscape)"> <!-- 只有竖屏时有样式 --> <link rel="stylesheet" href="./css/demo.css" media="screen and (orientation: portrait)">
3、媒体查询常见的媒体尺寸设置
通过媒体查询,针对不同的设备的尺寸设置断点来改变布局
屏幕 设备 断点 超小屏幕 手机 <768px 小屏幕 平板 >=768px ~ <992px 中等屏幕 桌面 >=992px ~ <1200px 大屏幕 桌面 >=1200px 常用媒体查询尺寸: 1200px 1100px 1000px 1024px 980px 768px 720px 640px 480px 375px 320px 280px
4、移动设备优先
移动设备优先:超小屏幕 超小型设备(手机,768px以下) 小屏幕 768px-992px @media screen and (min-width:768px) { ... } /* 小型设备(平板电脑,768px 以上) */ 中等屏幕 992px - 1200px @media screen and (min-width:992px){ ... }/* 中型设备(台式电脑,992px 以上) */ 大屏幕 大于1200px @media screen and (min-width:1200px){ ... }/* 大型设备(大台式电脑,1200px 以上) */
案例:
<style> /*在移动端看 移动端显示的颜色 768px屏幕以下*/ body { background-color: orange; } /* 小屏幕 768px-992px 屏幕宽度在768px以上显示的颜色*/ @media screen and (min-width: 768px) { body { background-color: yellow; } } /* 中等屏幕 992px - 1200px*/ @media screen and (min-width: 992px) { body { background-color: tomato; } } /* 大屏幕 大于1200px*/ @media screen and (min-width: 1200px) { body { background-color: pink; } } </style>
5、大屏幕设备优先
大屏幕设备优先:大屏幕 桌面在1200px以上 大型设备(大台式电脑,1200px 以上) 中等屏幕 992px-1200px @media screen and (max-width:1200px) { ... } /* 中型设备(台式电脑,1200px 以下) */ 小屏幕 768px-992px @media screen and (max-width:992px){ ... }/* 小型设备(平板电脑,992px 以下) */ 超小屏幕 768px屏幕以下 @media screen and (max-width:768px){ ... }/* 超小型设备(手机,768px 以下) */ 或者 @media screen and (max-width:768px){ ... }/* 超小型设备(手机,767px 以下) */ /* 注意:此时超小屏幕和小屏幕在768px之间有冲突,怎么解决? 把超小屏幕的区间降低1px*/
案例: <style> /* 屏幕大于1200px显示的颜色 */ body { background-color: green; } /* 中等屏幕 992px-1200px 屏幕宽度在1200px以下显示的颜色*/ @media screen and (max-width:1200px) { body { background-color: tomato; } } /* 小屏幕 768px-992px*/ @media screen and (max-width:992px) { body { background-color: pink; } } /* 注意:此时超小屏幕和小屏幕在768px之间有冲突,怎么解决? 把超小屏幕的区间降低1px*/ /* 超小屏幕 768px屏幕以下*/ @media screen and (max-width:767px) { body { background-color: orange; } } </style> </head> <body> </body> </html>