《物联网web应用技术》课件 项目三 任务四安防监测界面样式

《Web应用技术》物联网Web应用技术项目三CSS样式任务四安防监测界面样式响应式设计网页的可视化区域CSS网格视图回顾1.网页如何根据设备选择不同的显示效果？2.如何设置不同分辨率设备图片的自适应显示?任务引入任务描述:安防监测界面样式的设计与程序编写任务教学目标：掌握响应式的媒体查询设置；掌握响应式的图片设置。任务概要教学内容响应式媒体查询响应式图片安防监测界面设计实训一二三响应式媒体查询知识点一响应式媒体查询使用@media查询，可以针对不同的媒体类型定义不同的样式。设置如果浏览器窗口小于500px,背景将变为浅蓝色，代码如下：@mediaonlyscreenand(max-width:500px){body{

background-color:lightblue;}}（一）媒体类型媒体类型：属性说明all用于所有设备print用于打印机和打印预览screen用于电脑屏幕，平板电脑，智能手机等。speech 应用于屏幕阅读器等发声设备（一）媒体功能媒体功能：（一）添加@media查询断点在前面项目使用行和列来制作网页，它是响应式的，但在小屏幕上并不能友好的展示。使用媒体查询以解决此问题。在设计中添加@media查询断点，不同的断点有不同的效果。（一）添加@media查询断点.col-1{width:8.33%;}.col-2{width:16.66%;}.col-3{width:25%;}.col-4{width:33.33%;}.col-5{width:41.66%;}.col-6{width:50%;}.col-7{width:58.33%;}.col-8{width:66.66%;}.col-9{width:75%;}.col-10{width:83.33%;}.col-11{width:91.66%;}.col-12{width:100%;}@mediaonlyscreenand(max-width:768px){/*Formobilephones:*/[class*="col-"]{width:100%;}}查询在768px像素设备，当屏幕（浏览器窗口）小于768px时，每一列的宽度是100%。（二）为移动端优先设计/*为移动端设计:*/[class*="col-"]{width:100%;}@mediaonlyscreenand(min-width:768px){/*Fordesktop:*/.col-1{width:8.33%;}.col-2{width:16.66%;}.col-3{width:25%;}.col-4{width:33.33%;}.col-5{width:41.66%;}.col-6{width:50%;}.col-7{width:58.33%;}.col-8{width:66.66%;}.col-9{width:75%;}.col-10{width:83.33%;}.col-11{width:91.66%;}.col-12{width:100%;}}在设计时优先考虑移动端的设计。优先设计屏幕小于768px时的样式，在屏幕宽度大于768px时需要修改样式。（三）添加多个设备@media查询断点/*为移动端设计:*/[class*="col-"]{width:100%;}以下是为平板设备和移动手机设备设置断点。（三）添加多个设备@media查询断点@mediaonlyscreenand(max-width:768px){/*Fordesktop:*/.col-1{width:8.33%;}.col-2{width:16.66%;}.col-3{width:25%;}.col-4{width:33.33%;}.col-5{width:41.66%;}.col-6{width:50%;}.col-7{width:58.33%;}.col-8{width:66.66%;}.col-9{width:75%;}.col-10{width:83.33%;}.col-11{width:91.66%;}.col-12{width:100%;}}在屏幕为600px时添加媒体查询，并设置新的样式（屏幕大于600px但小于768px）。@mediaonlyscreenand(min-width:600px){/*Fortablets:*/.col-m-1{width:8.33%;}.col-m-2{width:16.66%;}.col-m-3{width:25%;}.col-m-4{width:33.33%;}.col-m-5{width:41.66%;}.col-m-6{width:50%;}.col-m-7{width:58.33%;}.col-m-8{width:66.66%;}.col-m-9{width:75%;}.col-m-10{width:83.33%;}.col-m-11{width:91.66%;}.col-m-12{width:100%;}}（四）方向自适应：横屏/竖屏结合CSS媒体查询，可以创建适应设备的方向（横屏landscape、竖屏portrait等）的不同布局。orientation：portrait|landscapeportrait：指定输出设备中的页面可见区域高度大于或等于宽度landscape：

除portrait值情况外，都是landscape。@mediaonlyscreenand(orientation:landscape){body{

background-color:lightblue;}}如果是横屏背景将是浅蓝色：响应式图片知识点二响应式图片响应式图片在不同设备上的有多种设置方法；使用时可以根据需求选择设置方法。（一）使用width属性如果width属性设置为100%，图片会根据上下范围实现响应式功能：img{width:100%;height:auto;}注意：在以上实例中，图片会比它的原始图片大。（二）使用max-width属性使用max-width属性很好的解决图片会比它的原始图片大。max-width属性设置为100%,图片也永远不会大于其原始大小：img{max-width:100%;height:auto;}（三）设置背景图片设置背景图片响应调整大小或缩放的方法有三种。div{width:100%;height:400px;background-image:url('sensor.jpg');background-repeat:no-repeat;background-size:contain;border:1pxsolidred;}1.如果background-size属性设置为“contain”,背景图片将按比例自适应内容区域。图片保持其比例不变。（三）设置背景图片设置背景图片响应调整大小或缩放的方法有三种。div

{

width:

100%;

height:

400px;

background-image:

url('sensor.jpg');

background-size:

100%100%;

border:

1pxsolidred;}2.如果background-size属性设置为“100%100%”，背景图片将延展覆盖整个区域。（三）设置背景图片设置背景图片响应调整大小或缩放的方法有三种。div

{

width:

100%;

height:

400px;

background-image:

url('sensor.jpg');

background-size:

cover;

border:

1pxsolidred;}3.如果background-size属性设置为“cover”，则会把背景图像扩展至足够大，以使背景图像完全覆盖背景区域（保持了图片的比例）。（三）不同设备自适应显示图片可以使用媒体查询，根据不同的设备显示不同的图片。/*Forwidthsmallerthan400px:*/body

{

background-image:

url('sensor1.jpg');}/*Forwidth400pxandlarger:*/@mediaonlyscreenand(min-width:400px)

{

body

{

background-image:

url('sensor2.jpg');

}}（三）不同设备自适应显示图片使用媒体查询的min-device-width替代min-width属性，将检测设备宽度而不是浏览器宽度。浏览器大小重置时，图片大小不会改变。/*设备小于400px:*/body

{

background-image:

url('sensor1.jpg');}/*设备大于400px(也等于):*/@mediaonlyscreenand(min-device-width:400px)

{

body

{

background-image:

url('sensor2.jpg');

}}安防监测界面设计知识点三（一）设计安防监测界面CSS样式/*设置body样式参数：背景颜色为#ECF0F1*/.body{ background-color:#ECF0F1;}1.设置body样式（一）设计空气质量监测界面CSS样式.header{ background-color:lightblue; color:#ffffff; padding:15px;}2.设置header样式设置header样式参数背景颜色为lightblue；文本颜色为#ffffff；内边距为15。（二）设计温湿度环境监测界面CSS样式.container{position:relative; float:left; width:40vw; height:30vh; margin:20px; padding:20px; text-align:center; color:lightgrey; border-radius:5px;}3.设置class选择器container元素样式设置各元素参数container位置为relative（相对定位）；Float设置左侧浮动；宽度为屏幕宽度的40%，高度为屏幕高度的30%；外边距为20；内边距为20；文本居中显示；文本颜色为lightgrey；边框为圆角，半径5。（二）设计温湿度环境监测界面CSS样式.containerimg{ width:10vw; margin:5vhauto;}4.设置container.img图片CSS样式设置containe.img元素样式参数设置元图片宽度为屏幕宽度的10%；外边距，上下边距为屏幕高度的5%，左右边距为浏览器边距。（二）设计温湿度环境监测界面CSS样式#fsContainer{ background-color:white; color:#555544;}5.设置风扇#fscontainer样式设置风扇#fscontainer样式参数：背景颜色为白色；文本颜色为#555544。（二）设计温湿度环境监测界面CSS样式#fsContainerimg{ -webkit-animation:rotatelinear3sinfinite; animation:rotatelinear3sinfinite;}6.设置风扇#fscontainer.img图片样式设置风扇#fscontainer.img样式参数：动画循环播放，3s一周期。（二）设计温湿度环境监测界面CSS样式@-webkit-keyframesrotate{ 0%{-webkit-transform:rotate(0deg);} 100%{-webkit-transform:rotate(360deg);}}@-moz-keyframesrotate{ 0%{-moz-transform:rotate(0deg);} 100%{-moz-transform:rotate(360deg);}}@keyframesrotate{ 0%{transform:rotate(0deg);} 100%{transform:rotate(360deg);}}7.设置风扇动画帧@keyframesrotate样式设置风扇动画帧@keyframesrotate样式参数：动画旋转从0度到360度；兼容不同的浏览器。。（二）设计温湿度环境监测界面CSS样式.sp{ color:#000000;}8.设置sp元素样式设置sp元素样式参数：文本颜色为#000000。（二）添加空气质量监测页面内容<head>

<!--设置可视区域--> <metaname="viewport"content="width=device-width,initial-scale=1.0"> <metacharset="utf-8"> <title>安防监测</title> <linkrel="stylesheet"href="../css/style.css"/></head>1.在head中引入css文件（三）添加空气质量监测页面内容<body><divclass="header"> <h2>安防监测</h2></div> <divclass="container"id="afContainer"> <imgid="af"src="../img/anfang.png"/> <br/> <spanclass="sp">安防报警</span>