css3响应式布局

责编:menVScode 2018-01-06 22:08 阅读(515)

        响应式布局

        一个网站能够兼容多个终端,并且在各个终端都可以很好展示体验。

        媒体类型

        在何种设备或者软件上将页面打开

all:所有媒体
braille:盲文触觉设备
embossed:盲文打印机
print:手持设备
projection:打印机预览
screen:彩屏设备
speech:'听觉'类似的媒体类型
tty:不适用像素的设备
tv:电视

        

#box{width:100px;height:100px;background-color:red;}
@media embossed{
	/*盲文打印机是绿色*/
	#box{background-color:green;}
}
@media tv{
	/*在tv上是粉色*/
	#box{background-color:pink;}
}
@media all{
	/*在所有媒体上是红色*/
	#box{background-color:red;}
}

        关键字

        and:连接媒体类型和媒体特性

@media all and (min-width:1201){  }

        not:关键字是用来排除某种制定的媒体类型

@media not tv

        only:只有在特定的某种设备上识别

@media only tv

        媒体特性

        min-width:当屏幕大小 大于等于 某个值的时候识别 

        max-width:当屏幕大小 小于等于 某个值的时候识别

        orientation:横竖屏(portrait/landscape)

@media (orientation:portrait) { //竖屏的时候
    div{ background-color: yellow; }
}
@media (orientation:landscape) { //横屏的时候
    div{ background-color: green; }
}

        竖屏/横屏检测的原理是通过可视区的宽度和高度之间的比例进行检测的。但在移动端中可能会出现问题,比如点击一个文本输入框的时候,会弹出键盘,这个键盘会影响屏幕可是区域的宽高,这种情况会造成竖屏/横屏检测错误。

        样式引入方式

        样式表末尾添加

@media all and (min-width:600px){  }

        link标签

<link rel='stylesheet' href='css/01.css' media='all and (min-width:600px)'  />

        写在样式表头部

<style>
	@import url(01.css) (min-width:400px);
	@import url(02.css) (min-width:600px);
	@import url(03.css) (min-width:800px);
	@import url(04.css) (min-width:1000px);
	body{
		margin: 0;
	}
	div{
		height: 100px;
		background-color: #f00;
		border: 1px solid #000;
		box-sizing: border-box;
		float: left;
	}
</style>
前端交流群: MVC前端网(menvscode.com)-qq交流群:551903636

邮箱快速注册

忘记密码