CSS3-分栏布局
column-width 栏目宽度
column-count 栏目列数
column-gap 栏目距离
column-rule 栏目间隔线
CSS3-响应式布局
媒体类型
all 所有媒体
braille 盲文触觉设备
embossed 盲文打印机
print 手持设备
projection 打印预览
screen 彩屏设备
speech '听觉'类似的媒体类型
tty 不适用像素的设备
tv 电视
关键字
and
not not关键字是用来排除某种制定的媒体类型
only only用来定某种特定的媒体类型
媒体特性
(max-width:600px)
(max-device-width: 480px) 设备输出宽度
(orientation:portrait) 竖屏
(orientation:landscape) 横屏
(-webkit-min-device-pixel-ratio: 2) 像素比
devicePixelRatio 设备像素比
window.devicePixelRatio = 物理像素 / dips
样式引入
<link rel="stylesheet" href="css/index.css" media="print" />
@import url("css/demo.css") screen;
@media screen{ }
<link rel=”stylesheet” media=”all and (orientation:portrait)” href=”portrait.css”>
<link rel=”stylesheet” media=”all and (orientation:landscape)”href=”landscape.css”>
@media screen and (min-width:360px) and (max-width:500px) {}
<link rel="stylesheet" type="text/css" href="indexA.css" media="screen and (min-width: 800px)">
<link rel="stylesheet" type="text/css" href="indexB.css" media="screen and (min-width: 600px) and (max-width: 800px)">
<link rel="stylesheet" type="text/css" href="indexC.css" media="screen and (max-width: 600px)">
补充:link和@import的区别,补充部分来自参考连接:http://www.cnblogs.com/zbo/archive/2010/11/17/1879590.html
页面中使用CSS的方式主要有3种:行内添加定义style属性值,页面头部内嵌调用和外面链接调用,其中外面引用有两种:link和@import。外部引用CSS两种方式link和@import的方式分别是:
XML/HTML代码
<link rel="stylesheet" rev="stylesheet" href="CSS文件" type="text/css" media="all" />
XML/HTML代码
<style type="text/css" media="screen">
@import url("CSS文件");
</style>
两者都是外部引用CSS的方式,但是存在一定的区别:
区别1:link是XHTML标签,除了加载CSS外,还可以定义RSS等其他事务;@import属于CSS范畴,只能加载CSS。
区别2:link引用CSS时,在页面载入时同时加载;@import需要页面网页完全载入以后加载。
区别3:link是XHTML标签,无兼容问题;@import是在CSS2.1提出的,低版本的浏览器不支持。
区别4:ink支持使用Javascript控制DOM去改变样式;而@import不支持。
移动设备
<meta name="viewport" content="" />
width [pixel_value | device-width(设备宽度)]
height [pixel_value | device-height(设备高度)]
user-scalable 是否允许手动缩放 (no||yes)
initial-scale 初始比例
minimum-scale 允许缩放的最小比例
maximum-scale 允许缩放的最大比例
target-densitydpi [dpi_value | device-dpi | high-dpi | medium-dpi | low-dpi]