响应式的网站怎么建（三）

 

扩大目标点击区域(按钮或超链接)

 

与PC端上经常使用鼠标不同，在手机等触屏设备上用户更习惯于手势操作，直接用手进行点击。研究表明成人食指的平均宽度是1.6-2.0cm，这相当于45-57px。大约57px宽的点击区域才能够满足用户点击时的舒适度需求，所以记得扩大行为引导按钮或超链接的点击区域，让它们对手指更加友好，优化用户体验。著名的费茨定律也指出，使用指点设备到达一个目标的时间，与当前设备位置和目标位置的距离和目标大小有关。简单点来说，在网站中，如果点击区域越小，用户在浏览获取页面时花费的时间就越长，这会大大降低用户的转化率。

 

建议： 虽然小编建议按钮或超链接的点击区域尽量扩大，最好超过57px，但是这还要结合网站的实际情况。点击区域也是越大越好，我们可以测量整个屏幕的大小，合理布局按钮或超链接的点击区域大小。另外，让按钮更有特色也能引发用户的互动，进而可以提高用户的转化率，就像下图中蓝色按钮的波浪效果就能充分吸引用户的注意力。

 

使用响应式图片或视频

 

图片在网站中举足轻重。在响应式网站中应用图片的核心问题在于如何确保图片灵活适应不同屏幕的设备，还不会出现失真、模糊不清等情况。因此千万不要使用固定宽度的图片，固定宽度的图片在适应不同大小的屏幕时常会出现显示不全等问题。如何做好图片的响应式?我们可以给图片设置相关属性，或者使用支持响应式的框架(比如Bootstrap、CSS Sprites等)， 用响应式图片class名来控制(例如class="img-responsive")。

 

视频也是网站中重要的营销工具之一，不少站长越来越频繁地在网页中使用视频。在响应式网站中运用视频要比图片更加复杂。这不仅仅关乎视频尺寸、大小的问题，如果没有合理设置，视频的播放按钮等元素还会出现拉伸或不对称的问题。如何让视频根据屏幕宽度自动缩放?我们可以插入插件如FitVids(jQuery插件)，或使用容器来嵌入代码，并指定子元素的绝对位置。

 

建议 ：如果服务器上有足够的空间，网站上的图片和视频最好以原始的尺寸呈现。但在小屏幕上，如果空间实在不够或是图片或视频极大影响了网站的加载速度，我们对它们进行适当的剪裁，保证原本的效果。还有，在网站中使用SVG矢量图也是一个不错的选择。与位图不同，SVG矢量图根据不同的屏幕分辨率只改变图片的路径而不会影响像素，因此它们可以任意缩放显示，不破坏任何清晰度或细节。

 

以上就是小编对于响应式网站建设的全部建议。