css - 最佳方法和覆盖 bootstrap css 时遇到问题

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 */