响应式

 

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

 

　　

 

　　媒询媒体查询

 

　　显示设备

 

　　@media

 

　　只有满足所有查询条件的时候，里面的样式才会被解析

 

　　all所有媒体

 

　　braille盲文触觉设备

 

　　embossed盲文打印机

 

　　print手持设备

 

　　projection打印预览

 

　　screen彩屏设备

 

　　speech‘听觉’类似的媒体类型

 

　　tty不适用像素的设备

 

　　tv电视

 

　　and用来链接多个查询条件

 

　　min-width:大于等于

 

　　max-width:小于等于

 

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

 

　　<style>

 

　　@mediascreenand(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"alland(min-width:800px);

 

　　/*宽度满足800-999的时候，只会引入a.css样式表*

 

　　@import"css/b.css"alland(min-width:1000px);

 

　　/*宽度满足1000-1199的时候，会同时引入a和b.css这两个样式表，后者覆盖前者*

 

　　@import"css/c.css"alland(min-width:1200px);

 

　　/*宽度满足1200的时候，会同时引入a和b、c.css这三个样式表，后者覆盖前者*/

 

　　/*同时会满足多个样式的查询条件，这种方式引入样式表要注意样式表的顺序*/

 

　　@import"css/a.css"alland(min-width:800px)and(max-width:999px);

 

　　/*宽度满足800-999的时候，只会引入a.css样式表*/

 

　　@import"css/b.css"alland(min-width:1000px)and(max-width:1199px);

 

　　/*宽度满足1000-1199的时候，引入b.css样式表*/

 

　　@import"css/c.css"alland(min-width:1200px);

 

　　/*宽度满足1200的时候，引入c.css样式表*/

 

　　/*因为同时只会满足一个样式表的查询条件，所以不需要太注意顺序*/

 

　　百分比布局

 

　　

 

　　<style>

 

　　.box{

 

　　width:100%;

 

　　}

 

　　.item_long{

 

　　width:100%;

 

　　}

 

　　.item_longimg{

 

　　width:100%;

 

　　}

 

　　.item{

 

　　width:46%;

 

　　height:270px;

 

　　float:left;

 

　　}

 

　　.item:nth-child(even){

 

　　float:right;

 

　　}

 

　　.itemimg{

 

　　width:100%;

 

　　}

 

　　</style>

 

　　<!--百分比布局适用于布局不会发生改变并且要求看到左右的内容-->

 

　　当值给百分比的时候，根据谁来计算

 

　　width根据父级的宽度来来计算

 

　　height根据父级的高度

 

　　margin始终根据父级的宽度来计算

 

　　top根据（定位_绝对定位）父级的高度来计算

 

　　left根据（定位_绝对定位）父级的宽度来计算

 

　　padding根据父级的宽度来计算

 

　　translatX,Y根据自身的宽高来计算

 

　　行高的表示方法：font:20px/1.2‘宋体’;表示文字大小的1.2倍






本文转载自中文网