服务热线
0526-395981962
本文摘要：一、响应式页面概述在我们学习媒体查询之前，先来相识一下什么事响应式页面响应式页面这个是bootstrap的中文文档网站，大家可以用chrome浏览器来模拟手机端的浏览效果，可以看得手机端和电脑端会见同一个网页时，都能获得比力好的浏览体验。也就是说，一套代码可以同时适应多个设备。这样的网页就是响应式网页。 这样的网页，就是基于媒体查询实现的。
本文关键词：「,融职,培训,」,Web,前端,学习,第,2章,网页,爱游戏体育官网,一
一、响应式页面概述在我们学习媒体查询之前，先来相识一下什么事响应式页面响应式页面这个是bootstrap的中文文档网站，大家可以用chrome浏览器来模拟手机端的浏览效果，可以看得手机端和电脑端会见同一个网页时，都能获得比力好的浏览体验。也就是说，一套代码可以同时适应多个设备。这样的网页就是响应式网页。
这样的网页，就是基于媒体查询实现的。这里需要特别注意的是，我们会见同一个网站的地址，用手机可以正常浏览，用电脑也可以正常浏览，这并纷歧定就是响应式页面，例如融职教育官网就是响应式的，它只是针对终端设备的差别，展示了两套代码而已。响应式页面强调的是一套代码。
二、媒体查询通过媒体查询，我们让css检测到浏览器视窗的展示尺寸，然后凭据差别的浏览器视窗尺寸设置差别的样式，进而实现了同一套代码适应差别设备的功效。max-width媒体查询是CSS3中增加的新特性，可以使用@media来界说差别的条件和样式，窗口尺寸（或设备尺寸）满足指定条件的时候才会应用指定的样式，实例代码如下所示。1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 <style> 9 .box{10 width:200px;11 height:200px;12 background-color: red;13 }14 /* 小于指定宽度，样式生效 */15 @media screen and (max-width:600px){16 .box{17 background-color: blue;18 }19 }20 </style>21 </head>22 <body>23 <div class="box"></div>24 </body>25 </html>首先我们来看上面代码的效果，当全屏打开浏览器的时候（PC端的浏览方式），我们可以看到div元素的配景色为红色，当我们将浏览器的窗口缩小（移动端的浏览方式），当浏览器尺寸宽度小于600px的时候，元素的配景色会酿成蓝色，这就是使用媒体查询实现的最基本的响应式页面，同一个文件，在差别设备上出现着差别的样式。
在上面的代码中，max-width界说的就是尺度，切合尺度就会让下面的样式生效，max-width这个尺度的意思就是：小于指定宽度，样式生效。min-width同样，我们也可以界说“大于指定宽度，样式生效”，实例代码如下所示。1 @media screen and (min-width:600px){2 .box{3 background-color: blue;4 }5 }上述代码与demo01的效果恰好相反，PC端出现蓝色，移动端出现红色，min-width的意思是：大于指定宽度，样式生效。多个尺度我们也可以给一个媒体查询界说多个尺度，实例代码如下所示。
1 @media screen and (min-width:600px) and (max-width:900px){2 .box{3 background-color: blue;4 }5 }通过上面的方法，我们可以界说一个有多个尺度的媒体查询，在上面的代码中，窗口大于600px而且小于900px的时候，样式生效，我们可以将浏览器窗口由大到小的收缩，可以看到元素颜色变化了两次。三、响应式页面我们使用媒体查询实现一个响应式的页面效果，让其在PC端可以显示一个横线列表，在手机端可以显示冲向列表。
四、响应式页面的缺点在真实项目开发中，响应式页面并不常用，主要是因为一下几点。为终端定制的页面，用户体验更好。响应式页面代码量会增多，影响网页性能。
网页后期维护成本增加。除非网页具备以下特点：网页自己并不庞大。对用户体验要求不高。希望多终端会见，又希望降低开发成本。
就可以选择响应式页面了。五、课后训练完成一个响应式页面的团队先容效果，要求如下标题在顶部居中显示在pc端成员列表分三行显示，每行四人手机端每行显示一人 【融职教育】在事情中学习，在学习中事情。
本文关键词：「,融职,培训,」,Web,前端,学习,第,2章,网页,爱游戏体育官网,一
本文来源：爱游戏体育官网-www.wangtuangou.com