响应式网站的布局是一个能够兼容多个终端的网站，不是为每一个终端做一个特定版本的网站。通俗的说，就是做一个网站能够适应多种设备，而不用为每个设备做一个特定的版本，并且在不同的设备上展示的模式也会不一样，能够为不同终端的用户提供更舒适的界面和更好的浏览体验。
而自适应布局能够使网页自适应显示在不同大小的终端上，意思就是不同大小的设备上都能显示同样的界面，让同样的页面适应不同大小的屏幕，根据屏幕大小，自动调整布局。
这就是响应式网站和自适应网站的不同之处，这两者其实也没有太大的冲突，从理论上看，无论是哪种情况下，响应式的布局都会比自适应布局好一些，但是响应式布局的设计中，可能要面对比较多的情况，要把所有的情况都要把握好，预测好，才能做出一个成功的响应式网站。看吧，制作一个网站是一件不简单的事吧，也是需要细心、耐心和坚持才能做出一个完美的网站的。
自适应：百分比布局，宽度使用百分比，文字使用em，现在也很多使用rem了，也就是所谓的高清方案；
响应式：据屏幕的大小自动的调整页面的展现方式，以及布局；
区别：
两种方式的解决问题是不一样的；
自适应是为了解决如何才能在不同大小的设备上呈现相同的网页；
响应式的概念应该是覆盖了自适应，但是包括的东西更多了。响应式布局可以根据屏幕的大小自动的调整页面的展现方式，以及布局
自适应：
在不同分辨率下不同设备上显示相同的页面。即：根据屏幕的宽度，自动调节网页内容的大小，使其主体内容和布局不变。
响应式：
响应式的概念应该是覆盖了自适应，但是包括的东西更多了。响应式布局可以根据屏幕的大小自动的调整页面的展现方式，以及布局。
(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文件。
网友评论