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

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

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

　　注重文本排版

　　文本排版是一个网站的重要组成部分。网站的可读性是头等大事，优秀的文本排版有助于网站信息的传递，还能与用户形成良好的互动。将网站分成不同的层级，最重要的内容放在网站的第一层级，第二、第三层级放相关信息、细节等，层次清晰，按优先顺序展开;精心选择一种合适的字体(有衬线字体易读，无衬线字体醒目)，一个网站中最好不要使用超过三种不同的字体;选择合适的字体大小，确保它在不同的而屏幕上都能得到良好的展示;规划行高和段落间距、留白等，以保持页面外观的整洁优雅。

　　建议： 文本要简单易懂，这点可以通过颜色对比和易读的字体实现，不过色彩的对比不能太弱(灰色文字在浅灰色背景上)，也不能太刺眼(红色文字在绿色背景上)。多使用纯文本，这是因为文本在根据设备屏幕进行缩放时不易出现图片的失真现象。突出显示文章的标题，标题至少应该是内容文字的1.6倍大，且在版式中占据中心位置，吸引人的标题能让用户点击进入浏览，还有可能在页面上停留更长时间。

　　重视视觉层次结构

　　除了文字排版以外，视觉层次结构在优化网站整体布局、与用户互动方面也有着不可忽视的作用。视觉层次结构最重要的功能就在于它可以帮助网站建立一个焦点，引导用户首先注意什么地方，然后了解哪些细节，又或是最后浏览某个区块。怎样可以构建有效的视觉层次结构?色彩当然是其中一员"大将"。我们可以用高比对度的颜色(如冷暖色)搭配，创造极强的视觉冲击力，突出核心内容，或者是以柔和的色调、相近的颜色进行视觉上的衔接，具体如何设计完全取决于我们想要网站达成什么样的目的。

　　建议： 视觉层次结构最终还是要服务于网站内容的，所以太过花哨的导航菜单、滑动效果或是不必要的flash动画千万不要放在网站的前列，实在必要时更应该删除。在谈到创造有效的视觉层次结构时，极简主义的设计潮流很可取。简洁大方的设计有助于突出网站的中心内容，如Slogan，行为引导按钮等，它还能在多个不同的视窗上给用户提供一致、直观的体验，极简也意味着最少的干扰，这会带来更高的用户转化率。还有，卡片式的用户界面也很有效，这是因为矩形的卡片(不管是图片还是文本)在适应不同大小的屏幕时更加简单，响应式更易实现。

　　响应式设计正在不断向前发展，究竟哪种方法可以做出最完美的响应式网站，大家还没有形成统一的答案。但是以上建站的这几个建议都是小飞结合丰富的建站实践总结出来的，希望对大家有一定的帮助。起飞页自助建站平台（?t_wd=a5）提供了众多响应式网站模板，采用了先进的建站技术，无需创建代码，即可轻松获得属于自己的网站。快来起飞页自助建站平台做一个响应式网站吧!