首页 > css教程 > 正文

css如何使用媒体查询进行响应式设计?(示例详解)

原创 2018-11-09 11:55:22 0 702
赞助会员专享特权
本篇文章给大家带来的内容是介绍css如何使用媒体查询进行响应式设计?(示例详解),通过简单的示例来看看最小宽度和最大宽度的使用。有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。

响应式设计背后的理念是使用相同的代码库在各种设备上提供出色的体验。这意味着我们编写的代码应该与设备无关。执行响应式设计不是一项小任务,需要我们拥抱Web的流动性,而不是努力控制它。媒体查询是响应式设计实现中不可或缺的一部分。

媒体查询的可扩展性允许各种复杂的媒体表达,但在响应式设计的上下文中最常用的是那些目标width并且在较小程度上height。

从广义上讲,有两种方法可以构建这样的媒体查询。我们倾向于将min-width基于媒体的查询称为移动优先。这意味着基本样式以最小视口为目标,并在视口变大时应用其他样式。相反,max-width基于媒体的查询将最大视口大小作为默认值,并应用其他样式以满足较小的视口大小。

下面我们就来通过简单示例来说明媒体查询如何进行响应式设计?

假设我们需要两列布局,其中主内容部分占据页面的3/4,右侧的侧边栏占据页面的1/4。然后,在具有窄视口的设备上,比如移动电话,我们希望相同的网页在主要内容下面呈现侧栏的内容。

.container {
  max-width: 45em;
}
.main {
  width: 67%;
  float: left;
}
.sidebar {
  width: 33%;
  float: right;
}
@media (min-width: 35em) {
  .main {
    width: 67%;
    float: left;
  }
  .sidebar {
    width: 33%;
    float: right;
  }
}
@media (max-width: 35em) {
  .main {    
    width: 100%;
    float: none;
  }
  .sidebar {
    width: 100%;
    float: none;
  }
}

简单的最小宽度示例:

首先看看演示效果:

3.gif

在上面的示例中,使用的查询是:

@ media(min-width:35em){   
  / *一些CSS属性* / 
}

我们用用简单的代码告诉浏览器,当屏幕大于或等于 35em宽时,应用此块中包含的样式,让main元素和sidebar元素浮动,在同一行显示。在使用最小宽度媒体查询时,我们的基本样式(即媒体条件不起作用时的默认样式)将以较窄的屏幕尺寸启动。

对于这个特定的场景,我们甚至不必编写任何基本样式,因为main元素和sidebar元素是块元素,默认情况下浏览器将main元素放在顶部,而在底部呈现sidebar元素。这是为什么一些开发人员主张使用最小宽度媒体查询来响应设计的原因之一。通常,你将编写更少的代码。

简单的最大宽度示例

让我们使用max-width查询来代替相同的场景。

2.gif

在这种情况下使用的媒体查询将是:

@media (max-width: 35em) {
  / *一些CSS属性* / 
}

与最小宽度相反,最大宽度是当屏幕小于或等于 35em宽时,此规则将应用此块中包含的样式。这意味着你的基本样式将在更宽的屏幕尺寸下生效。

这时,你需要编写在左侧呈现main元素和右侧的侧边栏sidebar 元素的基本样式。然后撤消媒体查询中的样式,以适应窄屏幕的大小。因此,对于这个特定场景,使用“min-width”媒体查询更有意义。

但是在一些场景下,“max-width”媒体查询是有意义的,就像表格一样。表格的默认显示在宽屏幕上很有效,但在较小的屏幕上,我们可能想要应用'display:block;' 表格行和表格单元格,以便在狭窄的屏幕上更好地读取内容。

4.gif

在这种情况下使用的媒体查询将是:

@media screen and (max-width: 35em) {
  tr,
  td {
    display: block;
    width: 100%;
  }
}

没有硬性规定,但指导原则是根据元素默认值做出选择。如果默认在窄屏幕上运行良好,则使用“min-width”媒体查询在更宽的屏幕上添加样式。如果默认在宽屏幕上运行良好,则使用“max-width”媒体查询在较窄的屏幕上添加样式。

总结:以上就是本篇文章的全部内容,大家可以自己编译试试,加深理解;希望能对大家的学习有所帮助。

以上就是css如何使用媒体查询进行响应式设计?(示例详解)的详细内容,更多请关注php中文网其它相关文章!

  • 相关标签:媒体查询 css3 min-width max-width
  • 本文原创发布php中文网 ,转载请注明出处,感谢您的尊重!
  • 相关文章


  • CSS:使用CSS媒体查询创建响应式布局 - McBye
  • 深入理解CSS Media媒体查询
  • CSS3媒体查询使用小结
  • 使用CSS3媒体查询方法总结
  • css如何使用媒体查询进行响应式设计?(示例详解)
  • 网友评论

    文明上网理性发言,请遵守 新闻评论服务协议

    我要评论
    独孤九贱(4)_PHP视频教程

    独孤九贱(4)_PHP视频教程

    江湖传言:PHP是世界上最好的编程语言。真的是这样吗?这个梗究竟是从哪来的?学会本课程,你就会明白了。 PHP中文网出品的PHP入门系统教学视频,完全从初学者的角度出发,绝不玩虚的,一切以实用、有用...

    独孤九贱(5)_ThinkPHP5视频教程

    独孤九贱(5)_ThinkPHP5视频教程

    ThinkPHP是国内最流行的中文PHP开发框架,也是您Web项目的最佳选择。《php.cn独孤九贱(5)-ThinkPHP5视频教程》课程以ThinkPHP5最新版本为例,从最基本的框架常识开始,将...

    独孤九贱(1)_HTML5视频教程

    独孤九贱(1)_HTML5视频教程

    《php.cn原创html5视频教程》课程特色:php中文网原创幽默段子系列课程,以恶搞,段子为主题风格的php视频教程!轻松的教学风格,简短的教学模式,让同学们在不知不觉中,学会了HTML知识。 ...

    ThinkPHP5实战之[教学管理系统]

    ThinkPHP5实战之[教学管理系统]

    本套教程,以一个真实的学校教学管理系统为案例,手把手教会您如何在一张白纸上,从零开始,一步一步的用ThinkPHP5框架快速开发出一个商业项目。

    PHP入门视频教程之一周学会PHP

    PHP入门视频教程之一周学会PHP

    所有计算机语言的学习都要从基础开始,《PHP入门视频教程之一周学会PHP》不仅是PHP的基础部分更主要的是PHP语言的核心技术,是学习PHP必须掌握的内容,任何PHP项目的实现都离不开这部分的内容,通...

    作者信息

    青灯夜游

    今天学习一小步,明天提升一大步

    最近文章
    怎么在Python中不换行的输出 397
    Python2和Python3之间有什么区别 1028
    使用Python可以做什么 958

    相关视频教程

  • CSS3从入门到精通教程 CSS3从入门到精通教程
  • CSS3 最新视频教程 CSS3 最新视频教程
  • 极客学院CSS及CSS3视频教程 极客学院CSS及CSS3视频教程
  • HTML5和CSS3扁平化风格博客教程 HTML5和CSS3扁平化风格博客教程
  • 相关视频章节