這篇文章帶給大家的內容是關於什麼是響應式？響應式佈局的詳細介紹，有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。
響應式：根據不同的裝置、不同的寬度、不同的特性、對頁面上內容的樣式做出對應的調整
媒询 媒体查询
显示设备
@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倍
以上是什麼是響應式？響應式佈局的詳細介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！
