有一种网站叫响应式网站，能够依据屏幕的不同，主动调整页面巨细以到达最佳观看款式。那么什么是响应式?响应式布局又是怎样的?

响应式

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

媒询 媒体查询

　　显示设备

　　@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）

　　响应式引进的多种写法

@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款式表 */

       /* 因为一起只会满意一个款式表的查询条件，所以不需要太注意次序 */

　　百分比布局

　　当值给百分比的时分，依据谁来核算

　　width依据父级的宽度来来核算

　　height依据父级的高度

　　margin始终依据父级的宽度来核算

　　top依据(定位_肯定定位)父级的高度来核算

　　left依据(定位_肯定定位)父级的宽度来核算

　　padding依据父级的宽度来核算

　　translatX,Y依据自身的宽高来核算

　　行高的表明办法 ： font:20px/1.2 ‘宋体’;表明文字巨细的1.2倍

　　以上就是什么是响应式的注解?响应式布局的具体介绍和具体内容!

如没特殊注明，文章均为梦魅网络原创,转载请注明来自http://www.monmei.com/news/show/545 。部分图片及文字来源于网络，若有侵权，请告知删除！

• 上一篇：网站建设对字体编排的7点要求
• 下一篇：PHP如何实现SMTP邮件的发送（代码）