Question

想知道是否有人可以提供帮助。我正在尝试为我们的学生反馈构建一个基本的响应式 HTML 页面，但我的代码似乎无法正常工作。它只会显示桌面版本。

CSS 样式

<style>
@media screen and (max-width: 39.9375em) {
  .hide-for-small-only {
    display: none !important; } }

@media screen and (max-width: 0em), screen and (min-width: 40em) {
  .show-for-small-only {
    display: none !important; } }
</style>

HTML

<div id="header" style="width: 100%; text-align: center;"><img src="http://www.sthelens.ac.uk/haveyoursay/images/haveyoursay-headerv2.png" alt="Have Your Say" title="Have Your Say" /></div>

<!-- MOBILE -->
<div class="show-for-small-only">
    <div id="whatsonyourmind-mob" style="margin: 10px; float: left; width: 100%; max-width: 100%; clear: both; text-align: center;"><a href="https://sthelens.ac.uk/whatsonyourmind" target="_blank" style="border: 0px;"><img src="http://www.sthelens.ac.uk/haveyoursay/images/whatsonyourmind-img.png" alt="What's On Your Mind" title="What's On Your Mind" /></a>
    <p style="font-family: Verdana, Geneva, sans-serif; font-size: 16pt; color: #EC008C;">INSTANT ACTION &amp; RESPONSE<br /><br /></p>
    <hr style="border: solid 2px #000; width: 40%; margin-left:auto; margin-right:auto;" />
    <p style="font-family: Verdana, Geneva, sans-serif;"><a href="http://vle.sthelens.ac.uk/mod/questionnaire/view.php?id=25059" target="_blank" style="text-decoration:none; color: #000;">What's On Your Mind is a direct channel to the senior managers of St Helens College. Just hit the button and you can easily submit your ideas or feedback online. You will always receive a response to let you know what we are doing.</a></p></div>
    
    <div id="studentsurvey-mob" style="margin: 10px; float: left;width: 100%; max-width: 100%; clear: both; text-align: center;"><a href="/studentsurveys" target="_blank" style="border: 0px;"><img src="http://www.sthelens.ac.uk/haveyoursay/images/studentsurvey-img.png" alt="Student Survey" title="Student Survey"/></a>
    <p style="font-family: Verdana, Geneva, sans-serif; font-size: 16pt; color: #199CD8;">PROVIDE STRUCTURED FEEDBACK FOR LONG TERM CHANGE</p><hr style="border: solid 2px #000; width: 40%; margin-left:auto; margin-right:auto;" />
    <p style="font-family: Verdana, Geneva, sans-serif;"><a href="/studentsurveys" target="_blank" style="text-decoration:none; color: #000;">We run a student survey each term to help us understand your experiences on your course and at College. We analyse the results from these surveys and then use this to make change and improvement for future years.</a></p></div>
    
    <div id="studentreps-mob" style="margin: 10px; float: left; width: 100%; max-width: 100%; clear: both; text-align: center;"><a href="http://vle.sthelens.ac.uk/course/view.php?id=1534" style="border: 0px;" target="_blank"><img src="http://www.sthelens.ac.uk/haveyoursay/images/studentreps-img.png" alt="Student Reps" title="Student Reps" /></a>
    <p style="font-family: Verdana, Geneva, sans-serif; font-size: 16pt; color: #EC008C;">RAISE POINTS FOR GROUP DISCUSSION WITH OTHERS<br /><br /></p>
    <hr style="border: solid 2px #000; width: 40%; margin-left:auto; margin-right:auto;" />
    <p style="font-family: Verdana, Geneva, sans-serif;"><a href="http://vle.sthelens.ac.uk/course/view.php?id=1534" style="text-decoration: none; color: #000;" target="_blank">Each programme has a nominated Student Rep who attends a Department Student Reps' meeting. If there is something you wish to raise, let them know and they can take to the next meeting. The issue may then be raised at the next Student Council meeting by the department's Curriculum Area Rep. These points are then fed back to senior managers and governors of the College.</a></p></div>
    
    <div id="personaltutor-mob" style="margin: 10px; float: left;width: 100%; max-width: 100%; clear: both; text-align: center;"><img src="http://www.sthelens.ac.uk/haveyoursay/images/personaltutor-img.png" alt="Personal Tutor" title="Personal Tutor" />
    <p style="font-family: Verdana, Geneva, sans-serif; font-size: 16pt; color: #199CD8;">PERSONALISED FACE TO FACE SUPPORT <br /></p>
    <hr style="border: solid 2px #000; width: 40%; margin-left:auto; margin-right:auto;" />
     <p style="font-family: Verdana, Geneva, sans-serif;">Your personal tutor is always on hand to help you with any immediate issues or problems that you might be having. Have a chat to them.</p></div> 
    
</div>

    
<!-- DESKTOP -->
<div class="hide-for-small-only">
    <div id="whatsonyourmind" style="margin: 10px; float: left; width: 22%; text-align: center;"><a href="https://sthelens.ac.uk/whatsonyourmind" target="_blank" style="border: 0px;"><img src="http://www.sthelens.ac.uk/haveyoursay/images/whatsonyourmind-img.png" alt="What's On Your Mind" title="What's On Your Mind" /></a>
    <p style="font-family: Verdana, Geneva, sans-serif; font-size: 16pt; color: #EC008C;">INSTANT ACTION &amp; RESPONSE<br /><br /></p>
    <hr style="border: solid 2px #000; width: 40%; margin-left:auto; margin-right:auto;" />
    <p style="font-family: Verdana, Geneva, sans-serif;"><a href="http://vle.sthelens.ac.uk/mod/questionnaire/view.php?id=25059" target="_blank" style="text-decoration:none; color: #000;">What's On Your Mind is a direct channel to the senior managers of St Helens College. Just hit the button and you can easily submit your ideas or feedback online. You will always receive a response to let you know what we are doing.</a></p></div>
        
    <div id="studentsurvey" style="margin: 10px; float: left; width: 22%; text-align: center;"><a href="/studentsurveys" target="_blank" style="border: 0px;"><img src="http://www.sthelens.ac.uk/haveyoursay/images/studentsurvey-img.png" alt="Student Survey" title="Student Survey"/></a>
    <p style="font-family: Verdana, Geneva, sans-serif; font-size: 16pt; color: #199CD8;">PROVIDE STRUCTURED FEEDBACK FOR LONG TERM CHANGE</p><hr style="border: solid 2px #000; width: 40%; margin-left:auto; margin-right:auto;" />
    <p style="font-family: Verdana, Geneva, sans-serif;"><a href="/studentsurveys" target="_blank" style="text-decoration:none; color: #000;">We run a student survey each term to help us understand your experiences on your course and at College. We analyse the results from these surveys and then use this to make change and improvement for future years.</a></p></div>
    
    <div id="studentreps" style="margin: 10px; float: left; width: 22%; text-align: center;"><a href="http://vle.sthelens.ac.uk/course/view.php?id=1534" style="border: 0px;" target="_blank"><img src="http://www.sthelens.ac.uk/haveyoursay/images/studentreps-img.png" alt="Student Reps" title="Student Reps" /></a>
    <p style="font-family: Verdana, Geneva, sans-serif; font-size: 16pt; color: #EC008C;">RAISE POINTS FOR GROUP DISCUSSION WITH OTHERS<br /><br /></p>
    <hr style="border: solid 2px #000; width: 40%; margin-left:auto; margin-right:auto;" />
    <p style="font-family: Verdana, Geneva, sans-serif;"><a href="http://vle.sthelens.ac.uk/course/view.php?id=1534" style="text-decoration: none; color: #000;" target="_blank">Each programme has a nominated Student Rep who attends a Department Student Reps' meeting. If there is something you wish to raise, let them know and they can take to the next meeting. The issue may then be raised at the next Student Council meeting by the department's Curriculum Area Rep. These points are then fed back to senior managers and governors of the College.</a></p></div>
    
    <div id="personaltutor" style="margin: 10px; float: left; width: 22%; text-align: center;"><img src="http://www.sthelens.ac.uk/haveyoursay/images/personaltutor-img.png" alt="Personal Tutor" title="Personal Tutor" />
    <p style="font-family: Verdana, Geneva, sans-serif; font-size: 16pt; color: #199CD8;">PERSONALISED FACE TO FACE SUPPORT <br /></p>
    <hr style="border: solid 2px #000; width: 40%; margin-left:auto; margin-right:auto;" />
     <p style="font-family: Verdana, Geneva, sans-serif;">Your personal tutor is always on hand to help you with any immediate issues or problems that you might be having. Have a chat to them.</p></div>    
</div>

非常感谢任何帮助。

谢谢，山姆

Answer 1

从移动设备开始并向上工作，几乎总是更好地处理响应式 CSS。使用 min-width 而不是 max-width ，因为从零开始向上工作更容易，并且可以避免尴尬的边界，例如 39.9375em。

最简单的解决方案是

.hide-for-small-only {display:none;}

@media screen and (min-width: 40em) {
    .hide-for-small-only {display:block;}
    .show-for-small-only {display:none;}
}

想象一个浏览器窗口，其宽度从零开始，然后无限增长。此解决方案首先隐藏“hide-for-small-only”元素并显示“show-for-small-only”元素。然后当浏览器宽度达到40em时，显示“hide-for-small-only”元素，隐藏“show-for-small-only”元素。

响应代码仅显示桌面而不是移动

1 个答案: