移动时代,是任何 Web 设计与开发者都不能忽视的一个时代,总有一天,你设计的东西将被显示在两种屏幕上,桌面大屏幕和移动小屏幕,如何让同一个网站同时适应完全不同的两种尺寸的屏幕,这是一个很久以来都没有完美解决方案的问题,直到有了 CSS3。
CSS3 的 Media Queries
在 CSS2 时代,如果你曾经为你的网站设计过打印版 CSS,就会明白 CSS3 Media Queries 的作用,不过,CSS3 的 Media Queries 比 CSS2 的 Media Type 更实用,事实上,CSS2 的 Media Type 并不曾被多少设备所支持过。CSS3 的 Media Queries 可以帮你获取以下数据:
这个bug很常见,首先看示例代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>000</title>
<style type="text/css">
*{margin:0; padding:0;}
body{font-size:12px; color:#333;}
#list{font-family:Arial; list-style:none;}
#list li{float:left;margin-right:10px;}
</style>
</head>
<body>
<ul id="list"><li>12条留言</li><li>回复</li></ul>
</body>
</html>
弹性布局一般使用em和%为单位,但是他们的属性和相对值却完全不一样。
首先是em字体高,继承父元素字体大小,但是本元素大部分数值属性(width,height,line-height,margin,border,padding等)都是参照本身字体大小。例如父元素font-size:1em=10px,子元素font-size:2em=20px,而子元素width:2em=40px。
一个小例子代码如下:
body {
font:62.5%/2em Microsoft YaHei, Arial, Tahoma, Helvetica, SimSun, san-serif;
height:100%;
position:relative;
text-align:center;
background:#A5CEEF;
}
.divEm{ width:10em; height:10em; border:1em solid #000; background-color:#999; font-size:1em;}
.div2Em{ width:2em; height:2em; border:1em solid #000; background-color:#666; font-size:2em; margin:1em; padding:1em}
<div class="divEm">dieEm测试
<div class="div2Em">die2Em测试</div>
</div>
使用绝对定位的top,left,right,bottom值也是参考本身元素字体高度。
在蓝色理想看到一篇帖子如何理解负边距,代码如下:
#mainer {
float:left;
width:100%;
margin-right:-300px;
background:silver;
}
#main {
margin-right:300px;
}
#sider {
float:right;
width:300px;
background:orange;
}
<div id="mainer">
<div id="main"><strong>main</strong></div>
</div>
<div id="sider"><strong>sider</strong></div>
实际效果如下:
自从写了这个皮肤之后,总结一下关于弹性布局的一些注意事项。由于小弟是新手,而且很久没练习页面了,很多地方只是总结一下基础知识,希望大虾们不吝赐教。
由于弹性布局使用想对单位em或者%,都是比较难计算的,因为想对单位都比较难计算。所以这里使用单位初始化,主要是针对em的。
根据漫谈font-size一文学习到了,基于windows的浏览器大部分默认的字体大小是medium,即 16ppem下显示为16px。根据前辈提供的转换表,在样式里加了body { font-size:62.5%},这样有两个好处: