本篇文章给大家带来的内容是关于什么是响应式？响应式布局的详细介绍，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
响应式
响应式：根据不同的设备、不同的宽度、不同的特性、对页面上内容的样式做出相应的调整
媒询 媒体查询 显示设备 @media 只有满足所有查询条件的时候，里面的样式才会被解析 all 所有媒体 braille 盲文触觉设备 embossed 盲文打印机 print 手持设备 projection 打印预览 screen 彩屏设备 speech ‘听觉’类似的媒体类型 tty 不适用像素的设备 tv 电视 and 用来链接多个查询条件 min-width : 大于等于 max-width: 小于等于
登录后复制
写一个范围，在这个范围内使用这种样式
@media screen and (min-width:1000px) and (max-width:1300px){ .box{ width:100px; height: 100px; background: #333333; } }
登录后复制
响应式-像素比
媒体特性； min-width:1000px 当屏幕宽度大于等于1000的时候会被解析 max-width:1300px 当屏幕宽度小于等于1300的时候会被解析 -webkit-min-device-pixel-ratio 最小像素比 -webkit-max-device-pixel-ratio 最大像素比 orientation:portrait （指定输出设备中的页面可见区域高度大于或等于宽度） orientation:landscape （除portrait值情况外，都是landscape）
登录后复制
@media (-webkit-min-device-pixel-ratio:2) and (orientation:landscape){ .box{ width:100px; height: 100px; background: #333333; } }
登录后复制
响应式引入的多种写法
@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样式表 */ /* 因为同时只会满足一个样式表的查询条件，所以不需要太注意顺序 */
登录后复制
百分比布局
.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%; }
登录后复制
当值给百分比的时候，根据谁来计算
width 根据父级的宽度来来计算
height 根据父级的高度
margin 始终根据父级的宽度来计算
top 根据（定位_绝对定位）父级的高度来计算
left 根据（定位_绝对定位）父级的宽度来计算
padding根据父级的宽度来计算
translatX,Y 根据自身的宽高来计算
行高的表示方法 ： font:20px/1.2 ‘宋体’; 表示文字大小的1.2倍
以上就是什么是响应式？响应式布局的详细介绍的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2831032.html
