css - Bootstrap : making table readable

Question

我使用 bootstrap 来设置表格样式，它在我的设备 (galaxy s5) 上以非常小的字体呈现。我希望它以正常大小的字体呈现，并在需要时让文本换行。对于我的实际用例，我必须使用表格。

https://jsfiddle.net/wcrrja2f/

对于全屏: https://jsfiddle.net/wcrrja2f/embedded/result/

<div class="container-fluid">
    <div class="row">
        <table class="col-xs-12">
            <tr>
                <td class="col-xs-5">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore</td>
                <td class="col-xs-2">12</td>
                <td class="col-xs-5">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore</td>
            </tr>
        </table>
    </div>
</div>

Answer 1

这是表格单元格内文本的正常大小。
如果你想在所有设备上增加字体大小，你可以使用 17px (根据您的需要更改):

td {
    font-size: 17px;
}

或者如果您想仅在小型设备上增加字体大小，您可以使用媒体查询来定位分辨率较小的设备，例如480px。 :

@media only screen and (max-width : 480px) {
    td {
        font-size: 17px;
    }
}

此外，如果您不想使用额外的 CSS 样式，您可以将文本包装在 <h3> 中。这将使它变大。