响应式布局？

响应式布局？

利用媒体查询，即media queries，可以针对不同的媒体类型定义不同的样式，从而实现响应式布局。

响应式布局：指利用一套网页代码来适配不同的设备，一般用来做中小型项目，个人展示类个人博客等。

媒体类型:（触发响应式代码，一般选择all、screen）

取值	含义
all	用于所有设备
print	用于打印机和打印浏览
screen	用于电脑屏幕，平板电脑，智能手机等
speech	应用于屏幕阅读器等发声设备

其他响应式语法:

and、not、min-width(最小宽度)、max-width(最大宽度)、orientation：portrait（纵屏）、orientation：landscape（横屏）、<link>（通过外部引用来触发css）

如< link rel=”stylesheet” href=”base.css” media=”all and (min-width:600px)” >

指当media里的条件满足时才会触发base.css.

注意：min-width、max-width、orientation：portrait、orientation:landscape要写在and（）括号里面。

 

响应式标识：@media

标识 媒体类型 and（继续要做的行为）括号里为响应式条件，

@media all and ( min-width:500px ){  #box{ background:bule; }  }

指只有屏幕大于500px时才会触发这个背景颜色，以显示蓝色。

@media all and ( min-width:500px ) and (max-width:700px) {  #box{ background:bule; }  }

响应式布局常见修改样式：

display、float、width。（PC端和移动端对显示隐藏，是否浮动，版心宽度等方面有区别）

注：响应式代码写到要适配的CSS后面。如

#box { width:300px; height:400px; background;green; } //正常情况下的适配代码

@media all and ( min-width:500px ){  #box{ background:bule; }  } //响应式代码