css3学习总结六

第六章        不同的屏幕尺寸，不同的设计

小插曲：http://www.osctools.net/  各种在线工具

主要是用css3重新编写一个页面布局让他适应不同的屏幕尺寸和大小

介绍下媒体查询和多列布局

 

媒体查询：可根据用户所使用的设备或显示器特性来自定义样式，比如可视区域的宽度。

使用它不仅可以针对特定的媒体类型设置一系列样式，还可以针对用户显示终端的一个或多个特性来定义样式。

说 明：所有可用的媒体特性都罗列在www.w3.org/tr/css3-mediaqueries/#medial里，并包含详细释义。最常用的特性：min-width，max-width，min-device-width，max-device-width，orientation（横向或纵 向）,color和resolution

媒体查询以@media规则开始，and连接要匹配的特性。

媒体查询代码可以直接写进主样式表文件，保证所有的样式都在同一处，便于调试，减少HTTP请求。可以用它配合link元素和@import规则来引入不同的样式文件

例如：@import url(narrow.css)  only screen and （max-weith：600px）；这里加only是防止某些稍旧的浏览器可能因为不支持媒体查询而将样式全部载入。

<link rel="stylesheet"  media="screem and （max-weith：600px）"   href="narrow.css">

多列布局：可以帮助我们将一个HTML元素变成多栏，就像是报纸的排版那样。

多栏是多列布局的的一部分。

我们可以用column-count或column-width其中之一来创建多栏。也可用columns这个间歇属性同时设置上述两个属性值，但ff并不支持。

column-width可以让浏览器根据页面的可用空间来决定分成多少个栏目。例如，一个250px款的容器设置其column-width为100排序，但将column-gap设置为0，那么将生产两个125px的栏目

column-count指定栏目的精确数量，其宽度则根据可用空间自动计算。若同时设置column-width和column-count，那column-count值被当做栏目的最大值。例如：一个250宽的容器，设置column-width为100px，column-count为3，则生产2栏。

可以用column-gap设置栏目间隔。并可用column-rule给每个间隔绘制一条竖线来实现视觉分割。

column-span可让元素跨越多栏，但目前无浏览器支持。

break-before，break-after，break-inside可控制内容分栏的位置，但目前无浏览器支持。

针对移动设备来改变布局

设备宽度：即实际设备和显示器横向所能显示的像素数量，而不是可视区域的宽度。

一般来说手机没有"窗口"的概念，也可以理解为"窗口"的大小总是与屏幕尺寸相等。

适用于320*480分辨率的手机   （min-device-width:320px） and （max-device-width:480px）           横向或纵向

适用于320*480分辨率的手机　　（max-width:320px）　　　　　　　　　　　　　　　　　　　　　　　纵向

适用于320*480分辨率的手机　　（min-width:321px）　　　　　　　　　　　　　　　　　　　　　　　 横向

适用于ipad　　　　　　　　　（min-device-width:768px） and  （max-device-width:1024px）        横或纵

适用于ipad　　　　　　　　(min-device-width:481px)   and   (max-device-width:1024px)  and (orientation:landscape)仅适用于处于横向的。同样也适用于宽大于高且分辨率小于1024px的桌面浏览器

适用于ipad　　　　　　　　(min-device-width:481px)   and   (max-device-width:1024px)  and (orientation:portrait)仅适用于处于纵向的。同样也适用于宽大于高且分辨率小于1024px的桌面浏览器

 

可视区域的meta标签

为手机而生的标签被称为"可视区域的meta标签".使用时需要将其name属性设置为viewport，形式如下：

<meta name="viewport"  content="">在content内可以填入任何用于处理 可视区域的指令。

width(=device-width)  height(=device-height)  initial-scale（某个页面首次被现实时可视区域的缩放级别。取值为1.0将使页面以其实际尺寸显示，无任何缩放）   minimun-scale（最小缩放级别，1.0将禁止用户放大到实际尺寸以下）  maximun-scale（最大缩放级别，1.0将禁止用户放大到实际尺寸以上）  user-scalable(用户是否可以缩放页面，yes，no)

对ie8之前的兼容使用

<!--[if lte IE 8]><script src="scripts/css3-mediaqueries.js"></script><![endif]-->

有缺点就是增加额外的HTTP请求