Question

我正在使用bootstrap，我遇到了一个问题，我不得不将样式硬编码到页面中以使div正常运行。当我在外部创建一个选择器时，即使使用html和正文选择器也不会响应。

我的移动观看代码覆盖

@media (max-width: 480px) {

html body.index { padding-bottom: 0px; color: #000; background-img: none; }

html body object { display: none; }
body div.fuller { display: none; }
footer { display: none; }
body .melt { margin: 0px; padding: 0px; border: solid 5px #000; }
iframe { margin-left: 0px; width: 560px; }
html body .retro { width: 480px; margin: 0px; overflow: hidden; }
}

我创建了一些媒体覆盖，但由于内联样式，其中一个覆盖不正常。当我将它添加到我的.css文件时为什么它不起作用的任何想法？此外，这是你们为移动设备编码的方式吗？这对我来说是新的，我愿意接受任何和所有方法来解决它。

欢迎任何建议。

http://galnova.com是我的网站

Answer 1

你可以试试这个

<link rel="stylesheet" type="text/css" href="screen.css"   media="screen"   />
<link rel="stylesheet" type="text/css" href="handheld.css" media="handheld" />

或

@media handheld {

html body.index { padding-bottom: 0px; color: #000; background-img: none; }

html body object { display: none; }
body div.fuller { display: none; }
footer { display: none; }
body .melt { margin: 0px; padding: 0px; border: solid 5px #000; }
iframe { margin-left: 0px; width: 560px; }
html body .retro { width: 480px; margin: 0px; overflow: hidden; }
}

或

@media only screen and (max-device-width: 480px) { ... }

或

@media handheld and (min-width: 20em) { ... } /* WIDTH */
@media screen and (max-height: 700px) { ... } /* HEIGHT */
@media screen and (device-width: 800px) { ... } /* DEVICE-WIDTH */
@media screen and (device-height: 400px) { ... } /* DEVICE-HEIGHT */

Answer 2

关于.retro样式，你的CSS中有一个拼写错误

你拥有的gain.css第1229行

htmlbody .retro { width: 480px; margin: 0px; overflow: hidden; }

... html和body之间缺少空格

希望这有帮助！

最好的方法，并且无法覆盖bootstrap css

2 个答案: