CSS3之响应式布局

CSS3多媒体查询

@media not|only mediatype and (expressions) {
    CSS 代码...;}

如果指定的多媒体类型匹配设备类型则查询结果返回true，文档会在匹配的设备上显示指定样式效果。

在不同媒体上加载不同的CSS样式文件：

<link rel="stylesheet" media="mediatype and|not|only (expressions)" href="print.css">

CSS3多媒体查询--not 与only 

•not:not是用来排除掉某些特定的设备的

–@medianot print（非打印设备）。

•only:用来定某种特别的媒体类型。

•all:所有设备。

•CSS3多媒体类型

–all  用于所有多媒体类型设备

–print  用于打印机

–screen  用于电脑屏幕，平板，智能手机等。

–speech  用于屏幕阅读器

CSS3用户界面

•resize属性：调整尺寸
–指定一个元素是否应该由用户去调整大小
–如果希望此属性生效，需要设置元素的overflow属性，值可以是auto、hidden或 scroll
•box-sizing属性：盒子大小调整
–允许以确切的方式定义适应某个区域的具体内容
•outline-offset属性：外形修饰
–对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓

resize属性值

box-sizing属性值

outline

•Outlines在两个方面不同于边框：

–Outlines不占用空间

–Outlines可能非矩形

–指定外边框边缘的轮廓15px：

div{
border:2px solid black;
outline:2px solid red;
outline-offset:15px;
}

其他用户界面属性