在css中媒体查询media query使用方法

查看上周的前端视频。
我们来谈谈媒体要求。
很有用。

2 02 3 年 3 月。
我正在写一个项目。
我刚用过这个。

我的朋友是一名设计师。
他说这个一定要掌握。

1 .基本语法。
@media（最大宽度：6 00px）{ .菜单{ 显示：无； } } 像这样写。

2 常用功能。
宽度是常用的。
例如（最小宽度：7 6 8 px）。
方向也非常重要。
垂直或水平方向。

3 示例场景。
就像平板电脑一样。
≥7 6 8 像素。
宽度可以固定。
容器宽度 7 5 0 像素。
居中。
@media（最小宽度：7 6 8 px）{ .容器{ 宽度：7 5 0px； 保证金：0 自动； } } 手机的屏幕很小。
导航需要更改为列布局。
@media（最大宽度：5 9 9 px）{ 运送 ul { 灵活方向：立柱； }
4 移动端优先。
先写小屏样式。
默认为浮动样式。
然后添加最小宽度。
7 6 8 px 是平板电脑。
1 02 4 px是笔记本。

5 需要注意的事项。
单位必须写正确。
px 或 em。
括号不能缺失。
例如（最小宽度：4 8 0px）和（方向：横向）。
测试必须在浏览器中运行。
模拟不同的设备并查看。

就是这样。
由你决定。

Media怎么清空CSS_CSS媒体查询清除与重置样式方法教程

上周我在前端开发小组中讨论了 CSS 媒体查询的使用。
大家都说通过覆盖、重置和隐藏来“清除”样式确实是关键。
首先，覆盖涉及使用媒体查询重新声明 CSS 属性，并通过选择器特异性和声明顺序覆盖原始样式。
例如，全局样式将元素的宽度设置为 5 00px，背景颜色为蓝色，然后在媒体查询中将宽度更改为 1 00%，背景颜色为红色。

Reset是指使用initial、unset和revert关键字来恢复或继承属性。
例如，h1 元素的默认字体大小为 3 em，边距为 2 0px。
在媒体查询中，您可以将边距恢复为浏览器默认值，并且字体大小继承自父级或恢复初始值。

对于隐藏元素，可以使用display:none或者visible:hidden来控制。
桌面上显示的侧边栏在移动版本上被隐藏。

然后，谈到响应式设计策略，有些人首先喜欢桌面，从为大屏幕设计开始，然后逐渐简化样式。
有些人首先喜欢移动设备，从小屏幕开始，逐渐增加风格。
两种方法都有各自的优点。
桌面优先适合复杂的布局，而移动优先则有更清晰的代码结构。

在辅助工具方面，CSS变量、@supports、@layer和CSSReset都是好帮手。
CSS变量可以集中管理样式值，@supports可以检测浏览器特性，@layer可以控制级联顺序，CSSReset/Normalize.css提供跨浏览器样式库。

综上所述，利用 CSS 级联、特异性和声明顺序，通过覆盖、重置或隐藏来动态调整样式，根据需要选择桌面或移动策略，结合这些辅助工具，可以提高样式管理的灵活性和可维护性。
最终，这一切都取决于特定的项目需求和个人喜好。
这是你的。