关于响应式的一点总结

关于响应式的一点总结：

之前在另一个博客上写了一些关于响应式的东西，不知道为什么被屏蔽掉了，，╮(╯▽╰)╭。。所以在这儿再写一次

1，首先，响应式网站，分为交互式和响应式

 1）交互式：页面根据用户的行为（鼠标移出移入，点击，表单输入是否正确，鼠标放到图片上显示预览图；幻灯片；移动端点击弹
出简洁菜单，按住弹出更多菜单；鼠标或手指拖放排序；等等……），进行的页面设计。

 2）响应式：针对不同浏览器分辨率，不同设备（PC，手机，ipad等等），并且能够兼容不同浏览器。

2.关于单位

1）px，绝对单位，一个像素就是1px，不会随着浏览器窗口大小的变化而变化，在响应式中最好少用

2）em，相对长度单位，参照物为父元素的font-size，继承性：一直向上寻找父元素的font-size直到html，如果父元素也没有font-size，浏览器会有一个默认的em设置：1em = 16px;

3）rem，以html的font-size为标准设置

4）大小计算：font-size:62.5%  1rem = 10px

                      font-size:100%  1rem = 16px

不同的浏览器对rem的解析是不一样的，谷歌下是12px（谷歌默认最小字体就是12px，低于12px它会认为阅读有障碍），IE是9.93px，火狐是10px（就是这么任性。。。）

3.关于图片

 1）用js实现

     $（function(){

        function makeImageResponsive(){

               var width = $(window).width();

               var img = $(".content  img');

             

              if(width<=480){

                 img.attr("src","images/1.png");

         } else if(width<=800){

                 img.attr("src","images/10.jpg");

         }else{

                img.attr("src","images/17.jpg")

         }

   }

        $(window).on('resize load'，makeImageResponsive)

}）

调用window的width（）方法，获取当前浏览器的宽度，然后if表达式判断，给img添加不同的图片属性。不过感觉这个方法不是很适合用于图片很多的网站，因为我们不可能遇到一个图片就写一段js来判断。

2）srcset

     img标签的srcset属性,以最合适的src去匹配不同屏幕，根据用户的屏幕分辨率或者尺寸进行分发

     <img src="images/10.jpg"  srcset="images/10.jpg 480w，images/11.jpg
 800w，images/12.jpg 1600w"

    size
= "(max-width: 360px) 340px, 128px",表示当前屏幕宽度不超过360px的时候，图片宽度为340px，其余情况下都是    采用128px.

sizes="(max-width: 360px) calc(100vw - 20px), 128px"表示当前屏幕宽度不超过360px的时候，图片宽度为       整个视区宽度减去20像素的大小，其余宽度都是128px

     alt="这是一个图片 "       />

3）picture

                      
<picture>
<source srcset="images/11.jpg" media="(min-width:50em)"/>  
<source srcset="images/10.jpg" media="(min-width:30em)"/>  
<img src="images/1.png" alt=""/>
</picture>

    根据浏览器的分辨率读取不同的source资源

    srcset,picture的兼容性都不是很好，这时候polyfill库就派上用场了，polyfill用来填平浏览器不兼容的坑

 
  picturefill库（只要引入picturefill.js文件），就可以放心的使用picture属性了

4.关于布局

  1）开始着手写一张网页的时候，最好把页面分成几大块都先计划好，不要想到哪儿就写到哪儿。心里有一个整体的概念，不要让           页面处于散着的状态。

  2）float布局，当浏览器缩小的时候，浮动的会往下掉，可以用min-width解决，当小于最小宽度的时候，页面就会出现滚动条。

       不过我现在很少用float 了。

 3）display:inline-block。一行排列几个div块，可以采用这个方式。注意将父元素的font-size设置成0，以消除inline-block元素之间的空白。实验之后会发现，inline-block的元素，会莫名其妙的掉下去，解决方法：在这个inline-block的元素外面再套一个绝对定位的div，相对于这个inline-block的元素绝对定位。

 4）我用的比较多的是flex布局。flex好处很多，两栏式布局，可以做到页面高度随着内容的撑开而自动增加。可以实现inline-blcok的效果而不需要设置一堆的绝对定位。也可以轻松的实现元素垂直居中，或者是导航栏的样式，等等，总之flex能实现很多的布局效果。

 5）媒体查询是块砖，哪里需要哪里搬。用@medias实现不同的浏览器分辨率设计不同的页面样式，从而做到我们所说的针对不同分辨率的响应式

6）调试插件：browser-sync，基于node安装，，，不多说，，很简单。

     安装npm

             之后安装npm install -g browser-sync

             启动browser-sync start –server –files “**/*.css, **/*.html”

7）未完待续.......