前端笔记：媒体查询和响应式布局

2024-06-09 10:39| 来源: 网络整理| 查看: 265

文章目录目的媒体查询响应式布局总结

目的

CSS中有一个叫做媒体查询（Media queries）的功能，这个功能可以让你查询当前运行网页的设备的一些信息，让你可以通过这些信息来调整网页的布局和样式等。常见的响应式布局通常就是利用这个功能来实现的。这篇文章将对相关的功能做个说明。

媒体查询

媒体查询的语法非常简单，大概就是下面的样子：

@media 查询条件 { CSS-Code; } /* 查询条件可以是媒体类型或是媒体特性 */ /* 也可以是由and、not、only、or修饰组合而成的短语 */ /* 多个条件也可以用，（逗号）连接，相当于 or */ /* 媒体特性需要用圆括号包围 */

先看个简单的例子：

DOCTYPE html> html,body { height: 100%; } /* 页面可见区域宽高比大于等于2/1 */ @media (min-aspect-ratio: 2/1) { body { background-color: red; } } /* 页面可见区域宽高比大于等于1/1 小于2/1 */ @media (min-aspect-ratio: 1/1) and (max-aspect-ratio: 2/1) { body { background-color: yellow; } } /* 页面可见区域宽高比小于等于1/1 */ @media (max-aspect-ratio: 1/1) { body { background-color: blue; } }

在这里插入图片描述媒体查询中的媒体类型主要是下面一些：

值描述all适用于所有设备，默认值print适用于在打印预览模式下在屏幕上查看的分页材料和文档screen主要用于电脑屏幕，平板电脑，智能手机等speech主要用于屏幕阅读器等发声设备

媒体查询中的媒体特性非常多，这里列出一些常用的：

值描述orientationportrait：网页可见区域高度大于等于宽度 landscape：网页可见区域宽度大于高度aspect-ratio网页可见区域宽高比min-aspect-ratio网页可见区域最小宽高比max-aspect-ratio网页可见区域最大宽高比width网页可见区域宽度值min-width网页可见区域最小宽度值max-width网页可见区域最大宽度值

媒体查询使用时需要注意的是它是CSS的内容，后面的规则会覆盖前面的规则，所以书写的顺序还是需要注意的，不然有可能会出现问题，比如下面例子：在这里插入图片描述媒体查询语法上来说使用比较简单，更多内容可以参考下面链接： https://developer.mozilla.org/zh-CN/docs/Web/CSS/Media_Queries/Using_media_queries https://developer.mozilla.org/zh-CN/docs/Web/CSS/@media

响应式布局

响应式布局主要是为了让网页在不同显示设备上以合适的方式显示而出现的一种设计思路。通常来说电脑的显示屏较大，大多都是横屏显示的；手机的显示屏比较小，通常都是竖屏使用的。如果只有一套UI显示的话体验上往往难以兼顾两者，这时候就可以使用响应式布局了。对于小型的网页项目来说目前常见的响应式布局通常就是利用媒体查询结合 meta标签的viewport属性来实现的，下面是个简单的例子：

DOCTYPE html> * { margin: 0; padding: 0; text-align: center; } html, body { height: 100%; } body { display: flex; flex-wrap: wrap; } .header { width: 100%; height: 10%; background-color: salmon; } .nav { background-color: lightgreen; } .main { background-color: mediumturquoise; } .footer { width: 100%; height: 10%; background-color: orchid; } /* 在页面较宽时 */ @media (min-width: 576px) { .nav { width: 20%; height: 80%; } .main { width: 80%; height: 80%; } } /* 在页面较窄时 */ /* 手机竖着拿的时候页面的CSS像素宽度大多小于576px */ @media (max-width: 575px) { .nav { width: 100%; height: 10%; } .main { width: 100%; height: 70%; } } 标题栏导航栏正文页脚

在这里插入图片描述

总结

媒体查询和响应式布局总体来说是比较简单的，基本上就上面这些内容了，更多的还是要结合实际业务来应用。

【本文地址】

公司简介

联系我们