如果客户端分辨率较低，如何隐藏一些 html 元素？答案

【问题标题】：How to hide some html elements if client resolution is lower?如果客户端分辨率较低，如何隐藏一些 html 元素？
【发布时间】：2016-06-26 00:50:26
【问题描述】：

我有一个包含 5 个<tr> 元素的表格，它在我的 1920x1080 屏幕上看起来不错，但在较低分辨率下看起来非常糟糕。

代码如下：

<table class="table fullwidth nextevent_table">
    <tbody>
        <tr class="row1 open">
            <td valign="middle" align="center" width="44">
                <a href="/index.php/Calendar/Calendarevent/1.html?">
                    <img src="/icons/events/35.png" style="max-height: 40px;" alt="eventicon3" class="eventicon eventicon">
                </a>
            </td>
        <tr class="row1 open">
            <td valign="middle" align="center" width="44">
                <a href="/index.php/Calendar/Calendarevent/2.html?">
                    <img src="/icons/events/35.png" style="max-height: 40px;" alt="eventicon3" class="eventicon eventicon">
                </a>
            </td>
        <tr class="row1 open">
            <td valign="middle" align="center" width="44">
                <a href="/index.php/Calendar/Calendarevent/3.html?">
                    <img src="/icons/events/35.png" style="max-height: 40px;" alt="eventicon3" class="eventicon eventicon">
                </a>
            </td>
        <tr class="row1 open">
            <td valign="middle" align="center" width="44">
                <a href="/index.php/Calendar/Calendarevent/4.html?">
                    <img src="/icons/events/35.png" style="max-height: 40px;" alt="eventicon3" class="eventicon eventicon">
                </a>
            </td>
        <tr class="row1 open">
            <td valign="middle" align="center" width="44">
                <a href="/index.php/Calendar/Calendarevent/5.html?">
                    <img src="/icons/events/35.png" style="max-height: 40px;" alt="eventicon3" class="eventicon eventicon">
                </a>
            </td>   
    </tbody>
</table>

可以使用 PHP 或 javascript，例如：

如果用户的屏幕为 1440x900，则隐藏最后一个 <tr>

如果用户的屏幕为 1280x1024，则隐藏最后 2 个<tr>

谢谢！

【问题讨论】：

仅供参考，您的 HTML 无效；你错过了所有的</tr> 标签。
您可以使用媒体查询根据分辨率隐藏tr。比 JS 更简单，更可靠。请参阅此示例：stackoverflow.com/a/24378398/2513751

标签： javascript jquery html css

【解决方案1】：

您可以为此使用 CSS 媒体查询：

@media (max-width: 1440px) {
    .nextevent_table tr:last-child { 
        display: none;
    }
}

@media (max-width: 1280px) {
    .nextevent_table tr:nth-last-of-type(-n+2) {
        display: none;
    }
}

【讨论】：

像魅力一样工作！！非常感谢！