响应式 - 为CSS添加媒介查询

简介: 响应式 - 为CSS添加媒介查询

前言

在本节中,我们会一起探究媒介查询的强大之处:渲染的页面能够自适应于所有的设备和所有的可能场景。好吧,我承认有点夸大其词。但是接下来我们确实会创建一个简单的Web页面,该页面可适用于不同窗口大小的浏览器、不同的设备以及其他可能的呈现方式。

准备工作

仅仅为了学习本节内容,你就得出去购买在此处所列的每一种设备,例如一台高清电视、一部智能手机、一部功能手机,至少还要有一台打印机。什么,没门?好吧,出于为你减少花费的考虑,我还只是让你买一些最有代表性的设备。这说明在每种设备上面都进行测试媒介查询是不太现实的,因为设备的种类太多了。其实在现实生活中,绝大多数的设备都是不会用到的,同时你也不会在意。接下来我们只是关注于那些平时会经常使用到的媒介查询场景。
这里先跳过那些对你来说不必要的设备。如果你发现需要在那些平时不怎么常见的设备中展现页面,也能非常容易地获取到相关的媒介查询信息。你永远不知道什么时候需要用哪些稀奇古怪的设备!如果需要,可访问WC3以获得详尽的信息和描述,网址为www.w3.org/TR/css3-mediaqueries/。在此,就不去关注那些无关问题了,只列举几种具有特定颜色限制的设备:单色显示终端、打印机、电视以及手持设备。此处媒介查询应用得最多的要数screen和print设置。

实现方式

创建一个HTML页面,其中包含一个h1的标题和一个div元素,div元素中包含一个image元素以及一段文本。如果没有合适的文本内容,可以用Ipsum生成一些。页面的源码如下所示:

接下来,就需要创建相关的媒介查询了。在下面所述的列表中,会对每一条设置进行一些简短的说明:

当Web页面处于打印状态时,就会启用该媒介查询。可以通过选择菜单File|Print然后查看打印预览进行验证。该媒介查询对于那些需要打印出来的Web页面是非常有用的。当然也可以修改或删除一些样式,确保打印版本的页面尽可能简洁。

这条配置信息作用于所有的竖屏显示设备。可以使得移动设备在横竖屏切换的时候呈现出不同的显示效果。有一点需要注意,该设置对于桌面设备同样适用,除非你限定该媒介查询只在较小的屏幕或设备上起作用。媒介查询的另一个方向值就是横屏。

基于height及width的媒介查询允许设置针对特定大小屏幕的样式。

上面的媒介查询会给所有页面施加同样的样式,无论浏览器窗口大小是多少,也就是说,以指定的大小在设备上渲染页面。

此处的媒介查询用于对16/9比率的设备窗口(非print类型)进行样式设置。

该设定选项适用于采用电视作为视频输出的设备。

在媒介查询中,min-width和max-width是最为有用的两个。基于该媒介查询能为任何窗口大小的设备设置响应式样式,这其中也包括那些屏幕很小的移动设备。首先设置最小(即移动)设备的相关样式,接下来设置那些最常见大小屏幕的相关样式,最后通过min-width来适配最大尺寸的屏幕。
创建了与项目显示设备相关的媒介查询后,通过给媒介查询设定不同的属性值进行样式的配置:



页面的最终版本呈现在下面的截图中。

工作原理

经过这些不同的设置后,就能够发现在不同的设备中,页面呈现出了不同的样式效果。当然,在你的站点中也可以通过组合不同的配置来实现更加多样化的响应式特效。

目录
相关文章
|
1月前
|
编解码 前端开发 UED
CSS进阶 - 响应式设计与媒体查询
【6月更文挑战第17天】响应式设计通过媒体查询适应不同设备,确保网页在桌面、平板、手机上提供优化体验。媒体查询是CSS核心技术,允许根据设备特性应用样式。常见问题包括忽视视口设置、硬编码断点和过度依赖查询。解决办法涉及设置正确的视口元标签、基于内容的断点和模块化设计。通过移动优先策略和灵活的断点管理,可创建高效、易维护的响应式网站。
|
9天前
|
前端开发 UED
使用HTML和CSS创建响应式表格
在网页设计中,表格是一种组织和展示数据的有效方式。本文档将指导你如何使用HTML和CSS来创建一个既美观又响应式的表格,以便在不同设备和屏幕尺寸上都能良好显示。我们将涵盖基础的HTML表格结构,样式美化以及如何实现响应式布局,使得表格内容在小屏设备上也能清晰阅读
53 0
|
2月前
|
UED 开发者 容器
【专栏】Flexbox是CSS3的全新布局模式,提供灵活响应式的页面设计
【4月更文挑战第27天】Flexbox是CSS3的全新布局模式,提供灵活响应式的页面设计。其特点包括灵活性、响应式和易理解,通过主轴和交叉轴控制元素排列对齐。核心概念有容器和项目,常用于导航栏、卡片布局、响应式设计、表格和表单布局。关键属性如flex-direction定义主轴方向,justify-content和align-items控制对齐,flex属性调整项目伸缩,order改变排序。在实践中,要关注响应式、代码维护和浏览器兼容性,以优化布局和用户体验。
|
13天前
|
Web App开发 前端开发 JavaScript
CSS 媒体查询 @media【详解】
CSS 媒体查询 @media【详解】
14 0
|
2月前
|
前端开发 UED 开发者
【专栏:HTML与CSS实战项目篇】制作一个响应式图片画廊
【4月更文挑战第30天】本文介绍了如何使用HTML和CSS创建响应式图片画廊。响应式画廊能根据用户设备屏幕大小自动调整布局。首先规划结构,包含一个图片容器和每张图片元素,并为图片提供替代文本。接着设计样式,设置图片大小、间距和视觉效果。然后通过媒体查询实现响应式设计,根据不同屏幕尺寸调整图片排列。同时考虑性能优化,如压缩图片和使用懒加载技术。最后,测试和调试确保画廊在各种设备上正常工作。这个过程强调了响应式设计和用户体验的重要性。
|
2月前
|
编解码 前端开发 UED
【专栏:HTML 与 CSS 移动端开发篇】CSS 媒体查询与移动端特定样式
【4月更文挑战第30天】CSS媒体查询在移动端开发中至关重要,它基于设备特性(如屏幕尺寸、分辨率、方向)应用特定样式,实现响应式设计。通过`@media`规则定义条件,如`(max-width: 600px)`,当屏幕宽度小于或等于600px时应用相应样式。常见条件包括屏幕宽度、高度、方向和分辨率。媒体查询可用于响应式布局、导航菜单优化、图片加载及字体调整。在实践中,需注意保持查询简洁,充分测试,渐进增强,并提前规划。掌握媒体查询能提升移动端用户体验,创造更优秀的网页设计。
|
2月前
|
小程序 前端开发 JavaScript
使用CSS的媒体查询功能在小程序中实现自适应布局
使用CSS的媒体查询功能在小程序中实现自适应布局
|
2月前
|
编解码 前端开发 UED
【专栏:CSS 进阶篇】CSS 媒体查询与响应式设计
【4月更文挑战第30天】CSS媒体查询与响应式设计是网页适应多设备的关键。媒体查询基于设备特性应用不同样式,而响应式设计确保网站在各种屏幕尺寸上表现良好。通过弹性布局和图片优化,实现跨设备一致性体验。实践中,如新闻、电商和个人博客网站广泛采用响应式设计。然而,需注意性能优化、设计平衡及多设备测试。掌握这些技术,为用户提供优质、一致的数字体验,共创网页设计的美好未来!
|
2月前
|
编解码 前端开发 开发者
这篇彻底学会CSS媒体查询
【4月更文挑战第1天】 这篇彻底学会CSS媒体查询
34 0
|
13天前
|
前端开发 JavaScript
文本,wangEditor5展示HTML无样式,wangEditor5如何看源码,Ctrl + U看CSS文件,代码高亮,Prism.js可以实现,解决方法,参考网页源代码的写法
文本,wangEditor5展示HTML无样式,wangEditor5如何看源码,Ctrl + U看CSS文件,代码高亮,Prism.js可以实现,解决方法,参考网页源代码的写法