学习响应式网站与普通网站区别，打造更优用户体验？

当你.… 站用户的指尖已不再局限于键盘和鼠标。无论是咖啡店里随手掏出的手机， 还是通勤路上拎着的平板，甚至是客厅的较大屏电视，都有可能成为他们打开网站的入口。于是 一个能在各种屏幕上天然呼吸、顺畅交互的响应式网站便成了企业争夺注意力的制胜法宝。而传统方式的普通网站在这场设备更多元化的较大潮中，缓慢缓慢显得有些“笨拙”。下面就让我们一起拆解两者之间的细微却决定命运的差别，看看怎样打造更优的用户体验。

一、概念先行：哪些叫响应式？哪些是普通网站？

响应式网站是一套基于弹性网格、弹性图片以及媒体平台查询的前端技术手段体系。它能够在页面加载时自动检测访问设备的视口较宽度、 分辨率、方向等信息，并据此切换布局、调整字体较大较小、替换合适分辨率的图片，从而保证内容始终保持最佳可读性和可操作性。

出岔子。 普通网站则往往只为桌面浏览器设计一个固定较宽度的页面结构。它虚假设全部访客都坐在电脑前，用较大屏幕、键盘和鼠标进行交互。当这一些页面被强较大行塞进手机或较小尺寸平板时常常出现横向滚动条、文字过较小、按钮不容简单点等尴尬局面。

二、 技术手段层面的核心差别

1. 布局方式：流体网格 vs 固定网格

哭笑不得。 响应式布局采用百分比或 vw/vh 单位，让列较宽随容器较宽度伸缩；普通布局则采用像素值，一旦视口变较窄就会“卡死”。弹性网格让页面像橡皮筋一样天然伸展，而固定网格更像钢铁墙壁，只能坚硬碰坚硬。

2. 图片处理：自适应环境图片 vs 单一尺寸图片

通过 或 srcset 属性， 响应式站点能够为同一张图提供给更多套不同分辨率版本，浏览器会挑选最匹配当前设备的那一张；普通站点往往只有一张较高分辨率图或一张压缩图，要么加载缓慢，要么画质差。