css 根据页面变化 - 而不是不同的文件

标签 css responsive-design media-queries

有没有办法根据用户点击的页面改变CSS样式?而不是每次都加载不同的 CSS 文件,要做到这一点?

我有一个网络 map 站点,所以在小型设备中我想为标题做 display : none,这样 map 的 div 会显得更大。我将为此使用媒体查询,但标题在所有其他页面中也会发生变化。我希望它只在 map 页面上发生变化。

我该怎么做?如果有一种方法你不必加载不同的 CSS 文件,那就太好了。是吗?

提前致谢。

编辑

我的文件结构是这样的

<?php
 error_reporting(E_ALL);

 include_once('header.php');

//rest of the code of the file starts here....

其中 header.php 包含标题、菜单栏、元数据。

所以我不能只给标题一个 id,因为它仍然是从所有页面可见的相同 id

再次感谢

最佳答案

如果您的页面是静态页面并且您只需要进行一次更改,只需创建一个 classdisplay:none;并将其应用于页眉而不影响任何其他页面或页面元素。

这样,您的 header 也会被隐藏,您的目的也会得到解决。

其他方法是添加 id给你的<body>并通过使用父子 CSS 选择器,随后为这些页面隐藏标题。

希望这对您有所帮助。

关于css 根据页面变化 - 而不是不同的文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20346662/

相关文章:

html - <链接 rel ="stylesheet"href ="css/contact.css"> 不工作

css - 改变截面高度响应式设计

html - 媒体查询有问题,没有任何反应

css - 为什么 IE11 会随机执行不合适的媒体查询?

html - 响应式布局 - 在小屏幕上使图片位于文本上方

javascript - 您可以在 Android Chrome 上为 matchMedia 添加一个 javascript 回调监听器吗?

css - 无论如何,我是否能够制作一个 block (一个变量)而不必重置其位置并继续进行?

css - Laravel Mix webpack scss 在 for 循环内 multiply 编译错误

html - CSS 背景未拉伸(stretch)至完整高度

javascript - 使用 .toggle 后如何恢复菜单?