html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
outline: none;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html { height: 101%; }
body { background: #e3e0ef url('images/bg.png'); font-size: 62.5%; line-height: 1; font-family: Arial, sans-serif; padding-bottom: 65px; }
::selection { background: #d7d0f3; }
::-moz-selection { background: #d7d0f3; }
::-webkit-selection { background: #d7d0f3; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
strong { font-weight: bold; }
table { border-collapse: collapse; border-spacing: 0; }
img { border: 0; max-width: 100%; }
h1 { font-family: 'Wellfleet', 'Trebuchet MS', Tahoma, Arial, sans-serif; font-size: 2.85em; line-height: 1.6em; font-weight: normal; color: #756f8b; text-shadow: 0px 1px 1px #fff; margin-bottom: 21px; }
p { font-family: Arial, Geneva, Verdana, sans-serif; font-size: 1.3em; line-height: 1.42em; margin-bottom: 12px; font-weight: normal; color: #656565; }
a { color: #896dc6; text-decoration: none; }
a:hover { text-decoration: underline; }
/* page layout structure */
#w { display: block; width: 700px; margin: 0 auto; padding-top: 35px; }
#container {
display: block;
width: 100%;
background: #fff;
padding: 14px 20px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 1px 1px 1px rgba(0,0,0,0.3);
-moz-box-shadow: 1px 1px 1px rgba(0,0,0,0.3);
box-shadow: 1px 1px 1px rgba(0,0,0,0.3);
}
/* comments area */
#comments { display: block; }
#comments .cmmnt, ul .cmmnt, ul ul .cmmnt { display: block; position: relative; padding-left: 65px; border-top: 1px solid #ddd; }
#comments .cmmnt .avatar { position: absolute; top: 8px; left: 0; }
#comments .cmmnt .avatar img {
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.44);
-moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.44);
box-shadow: 1px 1px 2px rgba(0,0,0,0.44);
-webkit-transition: all 0.4s linear;
-moz-transition: all 0.4s linear;
-ms-transition: all 0.4s linear;
-o-transition: all 0.4s linear;
transition: all 0.4s linear;
}
#comments .cmmnt .avatar a:hover img { opacity: 0.77; }
#comments .cmmnt .cmmnt-content { padding: 0px 3px; padding-bottom: 12px; padding-top: 8px; }
#comments .cmmnt .cmmnt-content header { font-size: 1.3em; display: block; margin-bottom: 8px; }
#comments .cmmnt .cmmnt-content header .pubdate { color: #777; }
#comments .cmmnt .cmmnt-content header .userlink { font-weight: bold; }
#comments .cmmnt .replies { margin-bottom: 7px; }<div id="w">
<h1>Threaded Comments Block</h1>
<div id="container">
<ul id="comments">
<li class="cmmnt">
<div class="avatar"><a href="javascript:void(0);"><img src="images/dark-cubes.png" width="55" height="55" alt="DarkCubes photo avatar"></a></div>
<div class="cmmnt-content">
<header><a href="javascript:void(0);" class="userlink">DarkCubes</a> - <span class="pubdate">posted 1 week ago</span></header>
<p>Ut nec interdum libero. Sed felis lorem, venenatis sed malesuada vitae, tempor vel turpis. Mauris in dui velit, vitae mollis risus. Cras lacinia lorem sit amet augue mattis vel cursus enim laoreet. Vestibulum faucibus scelerisque nisi vel sodales. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pellentesque massa ac justo tempor eu pretium massa accumsan. In pharetra mattis mi et ultricies. Nunc vel eleifend augue. Donec venenatis egestas iaculis.</p>
</div>
<ul class="replies">
<li class="cmmnt">
<div class="avatar"><a href="javascript:void(0);"><img src="images/pig.png" width="55" height="55" alt="Sir_Pig photo avatar"></a></div>
<div class="cmmnt-content">
<header><a href="javascript:void(0);" class="userlink">Sir_Pig</a> - <span class="pubdate">posted 1 day ago</span></header>
<p>Sed felis lorem, venenatis sed malesuada vitae, tempor vel turpis. Mauris in dui velit, vitae mollis risus.</p>
<p>Morbi id neque nisl, nec fringilla lorem. Duis molestie sodales leo a blandit. Mauris sit amet ultricies libero. Etiam quis diam in lacus molestie fermentum non vel quam.</p>
</div>
</li>
</ul>
</li>
<li class="cmmnt">
<div class="avatar"><a href="javascript:void(0);"><img src="images/pikabob.png" width="55" height="55" alt="pikabob photo avatar"></a></div>
<div class="cmmnt-content">
<header><a href="javascript:void(0);" class="userlink">Pikabob</a> - <span class="pubdate">posted 6 days ago</span></header>
<p>Listen you are going to get a kick out of this one. I've got to tell one of the funniest jokes of all time.</a></p>
</div>
</li>
<li class="cmmnt">
<div class="avatar"><a href="javascript:void(0);"><img src="images/default.png" width="55" height="55" alt="default avatar"></a></div>
<div class="cmmnt-content">
<header><a href="javascript:void(0);" class="userlink">MyUsername</a> - <span class="pubdate">posted 5 days ago</span></header>
<p>This is another anonymous comment. Maybe we can place <strong>some bold text</strong>. Then afterwards we can do some <u>underlined text</u>. And even a <a href="http://www.google.com/">link to Google</a>.</a></p>
</div>
<ul class="replies">
<li class="cmmnt">
<div class="avatar"><a href="javascript:void(0);"><img src="images/good-news-everyone.png" width="55" height="55" alt="Professor photo avatar"></a></div>
<div class="cmmnt-content">
<header><a href="javascript:void(0);" class="userlink">Professor</a> - <span class="pubdate">posted 3 days ago</span></header>
<p>Good news, everyone!</a></p>
</div>
<ul class="replies">
<li class="cmmnt">
<div class="avatar"><a href="javascript:void(0);"><img src="images/default.png" width="55" height="55" alt="default avatar"></a></div>
<div class="cmmnt-content">
<header><a href="javascript:void(0);" class="userlink">Anonymous1</a> - <span class="pubdate">posted 2 days ago</span></header>
<p>Smaller third-tier inline threaded comment post. Look how deep we can go.</p>
</div>
</li>
</ul>
</li>
</ul>
<ul class="replies">
<li class="cmmnt">
<div class="avatar"><a href="javascript:void(0);"><img src="images/maximus.png" width="55" height="55" alt="Maximus photo avatar"></a></div>
<div class="cmmnt-content">
<header><a href="javascript:void(0);" class="userlink">Maximus</a> - <span class="pubdate">posted 5 days ago</span></header>
<p>Hey man, just another sub-reply. Okay bye.</p>
</div>
</li>
</ul>
</li>
<li class="cmmnt">
<div class="avatar"><a href="javascript:void(0);"><img src="images/default.png" width="55" height="55" alt="default avatar"></a></div>
<div class="cmmnt-content">
<header><a href="javascript:void(0);" class="userlink">FreddieFantastic</a> - <span class="pubdate">posted 11 hours ago</span></header>
<p>So this is neat.</p>
<p>Hello, world!</p>
</div>
</li>
</ul>
</div>
</div>
我正在构建一个论坛网站，我找到了以下教程用于线程评论块。以下代码是我网站的线程评论块，但对手机和平板电脑没有响应。
有人可以帮助我将此代码转换为响应代码吗？
我知道我应该使用媒体查询，但不知道该怎么做。
要明确我只想要一个例子。
答案 0 :(得分：0)
媒体查询的最简单实现是将这样的内容放在您提交的CSS的底部：
@media screen and (max-width: 767px){
/* YOUR STYLES GO HERE.
* You can now use the exact selectors you use above,
* and when the screen is under 767px wide (such as most phones)
* this CSS will render, rather than the previous code.
*/
}
也不要忘记元视口标题。
最终，您必须选择要破解的设备宽度。
您还需要弄清楚您希望在不同浏览器上有所不同。
另外，不要忘记在浏览器中进行测试。
有关响应核心技术的全面入门，请查看google's overview。