前端入门优化

响应式设计的一些重要的技能，例如图片、表格和排版。

响应式图片

加载网页时，平均 60% 以上的流量都来加载图片。

响应式表格

表格有很多花样，如果表格的列超过一定的数量，那么它很可能会溢出视窗，小屏幕会产生水平滚动条，下面会介绍三种方法来解决这个问题。

隐藏列（Hidden columns）

当视窗尺寸缩小时，隐藏纵列实质上是根据他们的重要性来进行的。使用不显示的属性（display: none;）来隐藏所有其他东西，然后随着视窗变大再全部显示出来。隐藏纵列最大的问题是你在向用户隐藏内容，所以需要注意，如果可能，请使用缩写而不是完全隐藏它。

没有更多表格（No more tables）

当视窗宽度小于一定值，表格会瓦解重组成长列表，与数据表很不同，每个纵列实际上变成独立一行，表头在旁边。这样的好处是所有的数据都是可见的。

在媒体查询里面，我将要强制所有的表格、表头元素、表格主体、th、tr 和 td 元素执行块级显示。

table, thead, tbody, th, td, tr {
    display: block;
}
/*hide table header*/
thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
}
/*make room for header*/
td {
    position: relative;
    padding-left: 50%;
}
/*add row lables*/
td:before {
    position: absolute;
    left: 6px;
    content: attr(data-th)
    font-weight: bold;
}

封闭的表格（Contained tables）

把表格放在一个 div 里面，然后设置宽度为 100%，接着设置 over-flow-x: auto;

div.content_table {
    width: 100%;
    overflow-x: auto;
}
...
<div class="content_table">
    <table>
        <thead>
            <tr>
                <th>Team</th>
                <th>...</th>
                ...
</div> 

字体

决定每行的长度是技术性的，我们设计的时候要考虑用户的阅读方式，因为它会影响我们的布局，这也是我选择断点的时候。使字体足够大以适应不同设备的阅读效果是很重要的，基本字体大小（font-size）设置为至少 16px，行高（line height）至少为 1.2 em。合适的字体可以使阅读体验提升很多。

次要断点

除了选择主要断点，就是布局显著改变的地方，增加次要断点来实现一些小的调整，让页面布局变得美好。