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

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

响应式

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

显示设备

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