如果通过移动浏览器访问,如何更改网站的CSS

Question

我的网站标题中有一个下拉菜单.我正在搞乱我的网站移动版下拉菜单的设计,它看起来比以前更好.(它的颜色一样,现在标题是浅绿色/蓝色,我的下拉菜单是#333.)我回到了桌面版,现在整个菜单容器都是#333.但是,如果我恢复我的更改,修复我的桌面版本的样子,移动版本将恢复到原始设计.

有关如何解决此问题的任何提示.我不是很擅长JavaScript,但我想也许一个代码可能会命令背景颜色在我的桌面版本上保持浅绿色并在我的移动版本上显示为#333.

我不知道什么是最好的.其他人有想法吗？

Answer 1

看看CSS媒体查询,这是一种在网站低于某个宽度时更改网站CSS的简单方法.

/* This will change the background-color to #333 whenever the width of the screen is below 480px */
@media screen and (min-width: 480px) {
    body {
        background-color: #333;
    }
}

不要忘记<meta>标记以获取正确的视口数据:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

希望这可以帮助!