建站知识

你是否曾有过这样的体验，使用手机浏览网页时发现它是呈现电脑版页面，需要不断地缩放才能看清内容。现在响应式网页的出现解决了这个问题，但仍有很多人不知道什么是响应式网站？与自适应页面设计有什么区别？今天告诉大家答案。



一、什么是响应式页面设计

响应式网页设计（Responsive Web Design, RWD）又称为自适应网页设计、适应性网页、回应式网页设计，是设计网站时采用CSS3，以百分比的方式以及弹性的画面设计，在不同分辨率下改变网页页面的布局排版，让不同的设备都可以正常浏览同一网站，提供最佳的视觉体验。



以前很多手机版网站设计都是与电脑上的网站区隔开来另外再制作，就会导致如果进行更新网页内容就必须要更新两次。现在使用响应式页面设计模式所制作出来的网站，相同的网址、相同的网站内容，使用不同型号的电脑、手机以及平版浏览时，网站的代码可让页面内容适应不同分辨率的设备，自动排版成适合浏览的大小，简单的说，让网页中的文字以及图片甚至是网站的特殊效果，自动适应用户正在浏览屏幕的大小。



• 屏幕分辨率宽度在1024像素以上时，传回的网页会显示网站最完整的内容。
• 屏幕分辨率宽度在700像素以下时， banner会自动缩排，横式导航栏改成下拉式选单。
• 屏幕分辨率宽度在400像素以下时，版型会显示全为直条状，便于手机向下滚动阅读。

同一个网站就有各种不同的页面效果呈现，显示的字体大小也不同，让用户易于浏览，同时也减少其在不同设备上浏览时的缩放、移动动作。

二、非响应式设计网站的呈现效果

如果没有使用响应式设计，网页在手机版面上的呈现，可能会有变形的情况，导致用户难以阅读，以下是来自 DequeUniversity 制作的没有套用响应式设计网页的范例：



可以看见，没有响应式页面设计的网站，会让手机版的页面难以阅读，使用者必须使用手指滑动放大，造成不便。

二、响应式网站设计中遇到表格该怎么处理