浅谈自适应网页

浅谈自适应网页

1、背景介绍

       起初，网页设计者都会涉及固定宽度的页面，最开始的电脑显示器分辨率种类不多，因为当时本来电脑就少， 即使有变化也是800,850,870,880，比如开源中国的网页就是固定宽度为998来定制的，至于为啥是998，我也不知道。。。。。

       后来随着显示器越来越多，以及笔记本的普及，这种方式的页面出现了问题，于是出现了一种新的布局方式————宽度自适应布局。 我们平常讨论的宽度自适应布局，大多指的就是宽度自适应布局。这种布局出现了两种流派：百分比宽度布局 和 流式布局。
                
       大家熟知的Google发布了Android，于是互联网大战从PC打到了手机上，还有HTML5标准的发布。 手机屏幕虽然变小了，却添加了更丰富的功能，还记得以前用诺基亚上QQ的事情吗？我们访问的都是3g.qq.com，当时使用的是普遍都是Android2.0，访问wap.qq.com，再后来的智能手机都是访问的m.qq.com.
       不禁有人问，「真的要给每一个手机分别设计一个网页吗？」，「真的要给电脑PC和手机分别设计不同的网页吗？」，解决办法当然有很多种。
                
       不过，最终的解决方案胜出者是响应式布局。响应式布局被大家熟知的一个重要原因就是Twitter开源了bootstrap。Google第一次完成了从先驱到烈士。

         下面再从直观一点的来看，响应式布局和自适应的区别：
                            
          首先两种的方式的解决问题是不一样的。
                            
          自适应是为了解决如何才能在不同大小的设备上呈现相同的网页。手机的屏幕比较小，宽度通常在600像素以下，pc的像素一般在1000像素以上，部分配置高的笔记本在2000像素以上的也有，同样的页面要显示在不同的设备上面，还要呈现出满意的效果，不是一件容易的事情。
                            因此就有人想出了一个办法，能不能"一次设计，普遍适用"，让同一张网页自动适应不同大小的屏幕，根据屏幕的宽度，自动调节网页的内容大小，但是无论怎么样子，他们的主体的内容和布局是没有变化的。
                    
         很多网站的解决方法，是为不同的设备提供不同的网页，比如专门提供一个mobile版本，或者iPhone / iPad版本。这样做固然保证了效果，但是比较麻烦，同时要维护好几个版本，而且如果一个网站有多个portal（入口），会大大增加架构设计的复杂度。

         响应式的概念应该是覆盖了自适应，但是包括的东西更多了。响应式布局可以根据屏幕的大小自动的调整页面的展现方式，以及布局。

                   

2、知识剖析

响应式布局的一些技术点纪录：

（1）允许网页的宽度自动地调整

（2）尽量少使用绝对的宽度，多点百分比

（3）相对大小的字体：字体不要使用px写死，最好使用相对大小的噩梦，或者高清方案rem，这个不限制与字体，别的属相也可以这么设置

（4）流失布局，float等的好处是，如果宽度太小，放不下两个元素，后面的元素会自动滚动到前面元素的下方，不会在水平方向overflow（溢出），避免了水平滚动条的出现。

3、常见问题

媒体查询的兼容性如何？

因为响应式布局兼容性并不好，在IE8以下的浏览器中无法实现效果。大家宁愿采用1000px一下宽度的页面。

   

提问环节：

Q:响应式好用吗?

A:媒体查询还是很好用的，熟能生巧。

Q：响应式怎么写？

A：不需要特别的书写格式，按照css的规范就行了。

Q：会发生冲突吗？

A:max相当于小于等于，min相当于大于等于，要注意，别重叠了。