2018自适应网站和响应式网站的概念以及两者的区别

2018⾃适应⽹站和响应式⽹站的概念以及两者的区别
1、⾃适应⽹站
•概念：使⽤不同设备浏览时呈现不同的⽹页，⽹页内容及版式风格或相似或完全不同，和PC端属于不同的⽹站模板，数据库内容或相同⼀致，或独⽴不同，⽬的在于为了符合访客的浏览，即通过宽度来调整⽹页内容的⼤⼩，来达到不同⼤⼩的设备所看到的⽹站内容及布局都是⼀样的，形象的说就像是同⼀张照⽚，其⼤⼩按照不同⽐例缩放来展⽰。

针对⼀些优化⼈员，更习惯于做到数据库同步，使PC端的⽹址和内容与移动端的⽹址和内容⼀⼀对应。

•例如：⼿机访问
•特点：
◦内容拥挤体验不好
◦开发需要⼀套UI即可
2、响应式
•概念：使⽤不同的设备浏览⽹站时，⽹站样式风格、内容和⽹址都是完全⼀样的，PC端和移动端属于同⼀个⽹站模板，数据库完全⼀致，也⾮常符合搜索引擎的优化规则。

即在⽹站上的页⾯，由于采⽤响应式的布局，可以在任何设备上⽆障碍显⽰，但是⽹页的样式早已根据响应式的布局转变成专为其他设备所准备的样式。

•响应式⽹站概念应该覆盖了⾃适应，⽽且涵盖的内容更多。

•在⼿机等设备上浏览，⽹页与PC端内容相似，但布局是⾃动改变为专为⼿机等其他设备所准备的。

•例如：⼿机访问
•特点：
◦体验好
◦开发需要两套UI（pc端⼀套，移动端⼀套）
3、⾃适应和响应式的区别
•两种⽅式的解决问题是不⼀样的。

⾃适应是为了解决如何才能在不同⼤⼩的设备上呈现相同的⽹页。

⼿机的屏幕⽐较⼩，宽度通常在600像素以下，pc的像素⼀般在1000像素以上，部分配置⾼的笔记本在2000像素以上的也有，同样的页⾯要显⽰在不同的设备上⾯，还要呈现出满意的效果，不是⼀件容易的事情。

因此就有⼈想出了⼀个办法，能不能"⼀次设计，普遍适⽤"，让同⼀张⽹页⾃动适应不同⼤⼩的屏幕，根据屏幕的宽度，⾃动调节⽹页的内容⼤⼩，但是⽆论怎么样⼦，他们的主体的内容和布局是没有变化的。

响应式的概念应该是覆盖了⾃适应，但是包括的东西更多。

响应式布局是解决如何根据屏幕的⼤⼩⾃动调整页⾯的展现⽅式，以及布局。

⾃适应还是暴露出⼀个问题，如果屏幕太⼩，即使⽹页能够根据屏幕⼤⼩进⾏适配，但是会感觉在⼩屏幕上查看，内容过于拥挤，响应式正是为了解决这个问题⽽衍⽣出来的概念。

它可以⾃动识别屏幕宽度、并做出相应调整的⽹页设计，布局和展⽰的内容可能会有所变动。

响应式布局的⼀些技术点纪录：
(1)允许⽹页的宽度⾃动的调整
(2)尽量少使⽤绝对的宽度，多点百分⽐
(3)相对⼤⼩的字体:字体不要使⽤px写死，最好使⽤相对⼤⼩的em，或者⾼清⽅案rem，这个不限制字体，别的属性也可以这么设置
(4)流式布局，float等。

float的好处是，如果宽度太⼩，放不下两个元素，后⾯的元素会⾃动滚动到前⾯元素的下⽅，不会在⽔平⽅向overflow（溢出），避免了⽔平滚动条的出现。

(5)选择加载css，<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 400px)" href="tinyScreen.css" />，这个意思是如果屏幕宽度⼩于400像素（max-device-width: 400px），就加载tinyScreen.css⽂件。

4、⾃适应⽹站与响应式⽹站的好处和弊端
•⾃适应⽹站和响应式⽹站各⾃的好处
⾃适应⽹站可以独⽴设计，做任何⾃⼰想要的风格，还可以做到数据库同步，设计⽅案灵活，可独⽴优化符合搜索引擎的规则。

响应式⽹站更加⽅便浏览，能够增加访客的体验度，⽆需再单独设计制作⼿机站，PC站即是⼿机站，对于优化来讲，权重不分散，更加符合搜索引擎的规则。

•⾃适应⽹站和响应式⽹站各⾃的弊端
⾃适应⽹站的⼿机站有时⽆法做到与PC站内容完全⼀致，且⼯作量⼤，⾃适应⼿机站往往使⽤不同的⼦域名或⽬录跳转，对于优化来讲权重分散，访客浏览体验仍有缺陷。

响应式⽹设计往往风格有些局限，对于复杂的框架结构难以实现，制作流程复杂，代码兼容性要求较⾼。

5、如何选择使⽤⾃适应⽹站还是响应式⽹站
⼀般使⽤⾃适应⽹站的⼿机站主要因为⾃⼰在建设⼿机站之前已经有了PC站，PC站不能做到⼩屏幕设备适中浏览，又不能进⾏⼤改版影响⽹站优化，故此建设⾃适应的⼿机站跳转来实现⼿机、ipad等符合浏览，⼿机站数据库⼀般为同步。

响应式⽹站往往是建设新站时设计，之前⽆PC站或⼿机，不需要顾及⽹站优化及数据同步，可设计为响应式⽹站，响应式⽹站更加符合访客浏览，增加⽹站体验度，也更符合⽹站优化⼯作。