什么是响应式？响应式布局的详细介绍

本篇文章给大家带来的内容是关于什么是响应式？响应式布局的详细介绍，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

响应式

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

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

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

 <style>         @media screen and (min-width:1000px) and (max-width:1300px){                     .box{                         width:100px;                         height: 100px;                         background: #333333;                     }         }     </style>

响应式-像素比

媒体特性；     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倍

以上就是什么是响应式？响应式布局的详细介绍的详细内容，更多内容请关注技术你好其它相关文章！