我们知道有一种网站叫响应式网站，可以根据屏幕的不同，自动调整页面大小以达到最佳观看样式。那么什么是什么是响应式?响应式布局是怎样的?下面和深圳网站建设公司万狼科技的小编一起来了解一下吧。

　　响应式

　　响应式：根据不同的设备、不同的宽度、不同的特性、对页面上内容的样式做出相应的调整

媒询 媒体查询
　　显示设备
　　@media
　　只有满足所有查询条件的时候，里面的样式才会被解析
　　all 所有媒体
　　braille 盲文触觉设备
　　embossed 盲文打印机
　　print 手持设备
　　projection 打印预览
　　screen 彩屏设备
　　speech ‘听觉’类似的媒体类型
　　tty 不适用像素的设备
　　tv 电视
　　and 用来链接多个查询条件
　　min-width : 大于等于
　　max-width: 小于等于

　　写一个范围，在这个范围内使用这种样式

　　响应式-像素比

媒体特性；

    min-width:1000px  当屏幕宽度大于等于1000的时候会被解析

    max-width:1300px  当屏幕宽度小于等于1300的时候会被解析

 

    -webkit-min-device-pixel-ratio  最小像素比

    -webkit-max-device-pixel-ratio  最大像素比

 

    orientation:portrait  

    （指定输出设备中的页面可见区域高度大于或等于宽度）

    orientation:landscape

    （除portrait值情况外，都是landscape）

<style>

        @media (-webkit-min-device-pixel-ratio:2) and (orientation:landscape){

                    .box{           

                             width:100px;                   

                             height: 100px;                    

                             background: #333333;            

                        }

        }   

</style>

　　响应式引入的多种写法

@import "css/a.css" all and (min-width:800px);

      /* 宽度满足800-999的时候，只会引入a.css样式表 *        

      @import "css/b.css" all and (min-width:1000px);

      /* 宽度满足1000-1199的时候，会同时引入a和b.css这两个样式表，后者覆盖前者 *        

      @import "css/c.css" all and (min-width:1200px);        

      /* 宽度满足1200的时候，会同时引入a和b、c.css这三个样式表，后者覆盖前者 */

      /* 同时会满足多个样式的查询条件，这种方式引入样式表要注意样式表的顺序 */

@import "css/a.css" all and (min-width:800px) and (max-width:999px);        

/* 宽度满足800-999的时候，只会引入a.css样式表 */

       @import "css/b.css" all and (min-width:1000px) and (max-width:1199px);        

       /* 宽度满足1000-1199的时候，引入b.css样式表*/

       @import "css/c.css" all and (min-width:1200px);        

       /* 宽度满足1200的时候，引入c.css样式表 */

 

       /* 因为同时只会满足一个样式表的查询条件，所以不需要太注意顺序 */

　　百分比布局

<style>

        .box{        

            width:100%;        

           }

 

        .item_long{          

          width:100%;        

          }

 

        .item_long img{     

               width:100%;        

               }

 

        .item{         

           width:46%;            

           height:270px;            

           float: left;        

           }

 

        .item:nth-child(even){     

               float: right;        

               }

        .item img{           

         width:100%;        

         }

    </style>

 <!--百分比布局适用于  布局不会发生改变  并且要求看到左右的内容-->

　　当值给百分比的时候，根据谁来计算

　　width 根据父级的宽度来来计算

　　height 根据父级的高度

　　margin 始终根据父级的宽度来计算

　　top 根据(定位_绝对定位)父级的高度来计算

　　left 根据(定位_绝对定位)父级的宽度来计算

　　padding根据父级的宽度来计算

　　translatX,Y 根据自身的宽高来计算

　　行高的表示方法 ： font:20px/1.2 ‘宋体’; 表示文字大小的1.2倍

　　以上就是什么是响应式?响应式布局的详细介绍的详细内容!