专栏首页学习猿地【融职培训】Web前端学习 第2章 网页重构17 媒体查询

【融职培训】Web前端学习 第2章 网页重构17 媒体查询

一、响应式页面概述

在我们学习媒体查询之前,先来了解一下什么事响应式页面

响应式页面

这个是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端可以显示一个横线列表,在手机端可以显示冲向列表。

四、响应式页面的缺点

在真实项目开发中,响应式页面并不常用,主要是因为一下几点。

  1. 为终端定制的页面,用户体验更好。
  2. 响应式页面代码量会增多,影响网页性能。
  3. 网页后期维护成本增加。

除非网页具备以下特点:

  1. 网页本身并不复杂。
  2. 对用户体验要求不高。
  3. 希望多终端访问,又希望降低开发成本。

就可以选择响应式页面了。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Web前端学习 第2章 网页重构17 媒体查询

    这个是bootstrap的中文文档网站,大家可以用chrome浏览器来模拟手机端的浏览效果,可以看到手机端和电脑端访问同一个网页时,都能获得比较好的浏览体验。也...

    学习猿地
  • 【融职培训】Web前端学习 第2章 网页重构18 rem布局

    PC端页面的网页重构,我们使用最多的单位是px。因为在PC端,大部分页面效果我们都可以设置成固定尺寸,但是在手机端,这种方案是不可行的,我们必须要按照百分比呈现...

    学习猿地
  • Web前端学习 第2章 网页重构18 rem布局

    PC端页面的网页重构,我们使用最多的单位是px。因为在PC端,大部分页面效果我们都可以设置成固定尺寸,但是在手机端,这种方案是不可行的,我们必须要按照百分比呈现...

    学习猿地
  • Web前端学习 第2章 网页重构17 媒体查询

    这个是bootstrap的中文文档网站,大家可以用chrome浏览器来模拟手机端的浏览效果,可以看到手机端和电脑端访问同一个网页时,都能获得比较好的浏览体验。也...

    学习猿地
  • Java学习笔记(四)——网络与数据库

    Java.net包中有InetAddress类的定义,InetAddress类的对象用于IP地址和域名,该类提供以下方法:

    后端技术漫谈
  • AI通过了艺术创作图灵测试,你根本分不出来作者是不是人

    安妮 千平 编译整理 量子位 出品 | 公众号 QbitAI 各位亲爱的文化圈权威,今年不用再看画了:近年来最大的艺术成就已经发生了。 这项艺术成就的诞生地,不...

    量子位
  • 理解浮点数

    相信大家在平常的 JavaScript 开发中,都有遇到过浮点数运算精度误差的问题。

    QQ音乐前端团队
  • 携程2015 Open House获奖项目:响应式的蜕变

    响应式的蜕变 Ctrip Tech 本文不再从最基本的语法开始行文,而在列举一些最基本的信息之后,开始探讨传统响应式设计的问题,与在实践当中思考出来的改进方法,...

    携程技术
  • Java描述设计模式(15):责任链模式

    这里分析的几个方法,都是从DispatcherServlet类的doDispatch方法中请求的。

    知了一笑
  • 策略模式

    概述 策略模式定义了一系列的算法,并将每一个算法封装起来,而且使它们还可以相互替换。策略模式让算法独立于使用它的客户而独立变化。 UML ? 实现 Strate...

    高爽

扫码关注云+社区

领取腾讯云代金券