使用 CSS 的笔记本电脑和移动设备的不同导航标题

Question

可以使用 CSS/Boostrap 将我的导航菜单标题“Lorem Ipsum Dolor Sit Amet”（笔记本电脑屏幕）更改为“LIDSA”（手机屏幕）吗？我该怎么做？谢谢！

示例如下：

Laptop Screen Mobile Screen

Answer 1

是的，你可以，将伪 class 与 content 和 attr() 函数一起使用：

使用全屏查看并尝试减小window

的宽度

[data-full]::before {
  content: attr(data-full);
}

@media only screen and (max-width: 520px) {
  [data-short]::before {
    content: attr(data-short);
  }
}

<a href="#" data-full="Lorem Ipsum Dolor Sit Amet" data-short="LIDSA"></a>

使用 CSS 的笔记本电脑和移动设备的不同导航标题

Different navigation title for laptop and mobile device using CSS

html

css

navigationbar