《响应式web设计实践》笔记

1.什么是响应式设计：

针对任意设备对网页内容进行完美布局的一种显示机制。

响应式网站设计(Responsive Web design)的理念是：

页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。具体的实践方式由多方面组成，包括弹性网格和布局、图片、CSS media query的使用等。无论用户正在使用笔记本还是iPad，我们的页面都应该能够自动切换分辨率、图片尺寸及相关脚本功能等，以适应不同设备；换句话说，页面应该有能力去自动响应用户的设备环境。响应式网页设计就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这样，我们就可以不必为不断到来的新设备做专门的版本设计和开发了

2.什么是自适应设计？

自适应是针对每一个尺寸（320，640，960......）的设备写不同的js和css,甚至页面也不同，断点比较硬，不平滑。响应式是自适应的一种。

思考：录播系统的部分想法属于自适应：pc端一个样式，移动端一个样式，页面结构不相同。但是在pc或者移动端各自的样式中又采用了百分比布局来等比的放大或者缩小。

3.两者的区别：

    

思考：我们5.0中只需要实现所有pc端的适应，并且ucd只提供一个固定宽度的切图，这种情况使用什么方式实现想要的效果，并且这种方式属于哪种设计方式？？

先说实现方式：

如果只是针对pc端的不同大小的屏幕，则需要将元素按照百分比来设置，因为pc端所有屏幕上的结构是相同的，所以只是所占宽度的要随着屏幕尺寸的变化而拉伸。鉴于UCD给的是960固定尺寸的效果图，那么

每个元素将按照960的固定尺寸百分比来实现。最外层元素的宽高通过js动态或者css media query来得到。（这种实现方式存在误差）

这种方式属于正常的百分比布局，不是响应式或者自适应。自适应的话需要UCD提供多种不同的效果图来对应大中小屏幕。

  

4.如何实现响应式设计？

•   首先，阻止移动浏览器自动调整页面大小，头部添加viewport的标签 
•  
  
  

• 其次，添加css3媒体查询来定义相对应的样式，里面采用的是固定宽度，只是添加了生硬的分割断点，               Response.js是为IE8及更低版本的浏览器支持媒体查询的javascript库。
• 根据内容优先的原则重新调整页面结构，移动端情况下内容优先。

（以上三点如果就此打住，则是自适应，根据要适配的设备在媒体查询中添加相应的断点，然后写与此对应的样式）

      
   

•   流动布局，按照公式：目标元素宽度÷上下文元素宽度 = 百分比宽度 来修改样式中的宽度为百分比，同样将像   素字体也修改为百分比em尺寸，现在浏览器默认的像素大小为16px,所以给初始body设置字体大小为16px，    其他元素对象为（x÷16）em ,这样可以实现弹性布局。

•   流动布局+css媒体查询+弹性图片相互配合，完成响应式布局。

         流动布局实现平滑的缩放，媒体查询约束范围，修改细节，图片实现自适应。

• 如果要快速的搭建一个响应式的网站，可以选择css网格布局的框架进行开发，推荐的几款框架：columnal Sematic

 

5.响应式设计的浏览器兼容解决方案?

    

     第一个： IE6,7,8不支持HTML5标签导致写出的页面凌乱不堪，使用modernizr(前端的瑞士军刀)来解决。

     使用方法：

     （1）下载modernizr.js文件

     （2） 引入js

     modernizr做了什么：

     （1）给不支持html5的新标签添加垫片脚本

     （2）检测是否支持新特性，并添加一大推的类名

     modernizr支持按需加载：

  

     第二个：使用response.js来使IE6,7,8支持min-width/max-width的媒体查询,使用条件注释可以满足只在特定的浏览器下加载这个js

     第三个：渐进增强的实例，当视口缩小到600px以下时，导航栏堆叠（bootstrap有同样的实现效果），menuMobile.js脚本可以实现这个效果，具体的实现方法结合Modernizr的按需加载：

    

     

    6.响应式图片的实现方式？

           设置样式为img{ max-width:100%;}

           存在的问题:需要准备一张足够大和清晰的图片,以保证在任何设备上都可以呈现,对于移动端来说,带宽要求太高.

 如果视口拉伸超过了图片的最大尺寸，图片就会变形，所以可以给图片添加阈值：比如我们提供的这个图片是400*200的高清大图，设置图片父类的width:30%,为防止上述现象，添加max-width:400px;这样就会在  400px内自由缩放，不会出现拉伸变形。

       举例:

       html：

      css:

         

 .mainImg{
               width:45%;
               max-width:400px;
           }
           .hero-pit{
                max-width:100%;
           }