谈到手机版网页，最常被提到的就是RWD。究竟什么是RWD呢？RWD，也就是响应式网站设计，英文为Responsive Web Design。Responsive响应式代表着网页内容可以依照显示器宽度，马上反应在排版上。也就是说，同一个HTML文本，可以通过CSS编写，依照不同装置（手机、电脑、平板）显示器宽度，无论直立或横放，都能流畅的缩放、更改版面配置、甚至是控制网页上的文字显示与否。
一般提到「建立手机版网页」，有三种做法，分别是：RWD、AWD、手机、电脑独立网站。
RWD，Responsive Web Design，响应式网站
手机、电脑同网址。同一个HTML文本，CSS能依照不同显示器宽度的条件，来改变排版。
AWD，Adaptive Web Design，自适应式网站
手机、电脑网址，可以做到完全一样。不同的装置开启时，会先判定装置是哪一种，来给予不同的CSS，进而改变排版。
Separate URLs，手机电脑各自为独立网站，不同网址
手机、电脑网址不同。保持电脑版网站不变，另外做一个专门给手机用的小尺寸网站。所以也可能会有不同的HTML文本、CSS、JavaScript档案。
把「Separate URLs」，拿来这边跟RWD、AWD讨论，有点奇怪。毕竟，AWD网站也是可以做成「手机、电脑网址不同」，但是为了顺应下面本篇文章主轴，会针对SEO优缺点来讨论，就暂且让我们用比较粗浅的方式来分类。
什么是RWD响应式网站（Responsive web design）？
要开始讨论对SEO影响之前，可以先了解什么是RWD响应式网站？原理是什么呢？RWD是通过检查显示器宽度（浏览器宽度），让网页上的内容，可以改变文字大小、行距、整体排版、区块位置、图片缩放等等样式。无论你是用手机开网页、电脑开网页、平板开网页，网页内容的版面配置，都可流畅的依照浏览器宽度来改变，用一套网址就可以走天下啦！
RWD重要的精神：设置检视区viewport
RWD最重要精神，就是会依据「显示器宽度」，也就是检视区宽度（viewport），来改变网页上的内容排版。在HTML文本上，应该要注明metaname=”viewport”的标签，让浏览器清楚知道，「宽度尺寸变化」与「网页的内容缩放」两者的比例。
利用metaviewport标签，控制浏览器大小变化时，网页内容的宽度、缩放该如何调整。
注明width=device-width，让网页内容可以依据「装置宽度」，灵活运用装置的独立像素，可以自由改变排版。
注明initial-scale=1，让网页CSS像素：装置独立像素＝1:1，如此一来，无论手机直立、横放，都能确保网页能完整运用显示器宽度。
RWD重要的精神：使用CSS@media，针对不同显示器宽度，套用不同样式
RWD网页，之所以可以随著装置显示器宽度来改变版型，最大的功劳就是来自于CSS样式。简单来说，我们可以用CSS设定条件，在不同的显示器宽度之下，可以使用不同的字型大小、行距、版面位置。
在CSS中，大型元素使用「相对」宽度，避免使用「绝对」宽度。因为各家手机、平板，显示器大小不同，设定了「绝对」宽度，难以保证可以在所有类型装置上正常显示。例如，在顶层div，设定width:100%，而不要使用width:344px。
使用CSS@media以针对不同大小的显示器套用不同的样式。
@media的语法，是一种简易的条件筛选功能，可以套用在CSS样式中，当显示器宽度符合条件，就会查询到相对应的CSS样式。
RWD响应式网站上关于SEO的设置
RWD响应式网站有哪些设定，与SEO相关呢？在SEO领域中，「使用者体验」一直是Google非常强调的。例如：手机网页是不是好操作？按钮够不够大？文字间距够不够宽？流程是不是顺畅？浏览的画面是不是有符合显示器宽度？网页载入时间是不是够快？
这些都是SEO中，非常重要的一环，也刚好是RWD技术的重点。
使用metaname=”viewport”标记，向浏览器声明，网页内容可以配合装置宽度调整大小。
请勿使用robots.txt或其他方式，挡住Googlebot检索任何网页资产(CSS、JavaScript和图片)，以避免Google无法正确解读RWD的网页配置。
RWD响应式网站上线后，使用Google行动装置相容性测试，检验Googlebot是否能正确解读，并且预防有不小心挡掉Googlebot的状况。
使用响应式图片技术（ResponsiveImages）。除了可依据装置宽度，调整图片比例之外，在高解析度装置上，也可给予高解析度图片。另外，也可以结合CSS的@media筛选功能，对于不同装置宽度，给予适合的图片档案，避免图片档案过大。
建议使用「适应性JavaScript（JavaScript-adaptive）」。