网站响应式设计的原理就是在CSS中，有一个不常用到的属性media。为了达到响应式设计的目的，让css根据屏幕宽度，当屏幕在一定的范围内，样式字体的大小显示的是一个样式，当屏幕超过这个范围时显示另一个样式。所以，网页在不同的手机屏幕上看时，总是有一个合适的观看效果。那么响应式网站主要分为哪些方面的设计呢？

　　1. 图片的响应式设计

　　对于响应式网站的设计和开发过程中，图片的设计一直是一个重点关注的对象。其中主要的就是图片需要根据用户浏览终端的不同而随之发生变化。并且不会出现显示不全、展开有空白等情况。其次就是触摸屏上使用手势操作几乎是用户的本能了。所以，在设计响应式图片的时候，滑动操作等手势操作赋予用户更多的权力，让体验更加逼真。

　　2. 网站整体框架的设计

　　其实对于不了解响应式网站建设的站长来说，不建议使用框架的形式来搭建响应式网站，可能会造成样式重复、内容类别之间发生冲突以及网页负重过于高等情况。所以使用网站整体框架的设计来建设响应式网站需要切合自身的实际情况，定位自己的需求后再进行。

　　3. 用户体验度的建设

　　用户体验度是一个网站是否可以生存下去的根本原因之一，其中响应式网站的用户体验度就更加重要了。响应式网站建设中常见的错误就是在pc端浏览是一切正常，但是到手机端或平板上的时候就变得很奇怪，这对用户体验度是很不好的。所以响应式网站建设时应该尽可能的满足更多的屏幕显示，需要用不同的屏幕大小的手机和平板测试。

　　4. 网站导航栏目的设定

　　导航栏的显示有时候在桌面端上导航的存在可能没什么，但是在移动端上查看的时候，导航还是尽量隐藏起来，需要的时候再显现。如左右切换的按钮和标明浏览位置的圆点，是在光标移动上去之后再显示，这样的设计不仅可以避免用户分心，而且能更好的页面布局，毕竟手机屏幕小，要尽量的展示更多的内容，这是一个很好的办法。