以em为单位来布局页面的设置

文章标签: css,css-em
2015-1-11 10:51:14     7 人阅读    

 花了一天时间看完《无懈可击的web设计》(第2版),薄薄的一本书,后来看了下价格,竟然要55大洋,当时就懵了,就这内容,顶多10块钱算了(当然,书是彩印的,工本费可能贵点)。没讲什么太新鲜的技巧,当然也有可能是书中的一些思想偶还领悟不到,唯一感兴趣的是讲到的灵活布局网页那里,记得有一次笔试的时候碰到过类似的问题,就是页面宽度、字体自适应浏览器窗口的问题,当时没注意,简单的用了百分比宽度,现在想想,百分比宽度可能问题更大,对于里面的元素宽度是很难把握的。
      好了,废话不说,切入正题。我们的目标也很简单,就是当用户改变文字大小时(比如按住Ctrl+鼠标滚轮上下滚动),字体能够随着变化而布局不被破坏。而这篇文章的主要目的,是学习如何设置各模块宽度、行高、字体的问题。
      为此,我给出如下的结构:

<div class="wrap">

<div class="header"></div>

<div class="body">

<div class="main"></div>

<div class="sider"></div>

</div>

<div class="footer"></div>
<
</div>


      然后,一步步来设置尺寸:
1、首先,因为各浏览器默认的字体大小是16px,为了方便后续的设置,我们把它统一为10px(比如我们要设置某处字体为13px,只要指定为1.3em即可,16/13=0.8125,每次都要计算,挺麻烦的),因10px/16px=0.625,所以,body字体大小设为62.5%(这个想必很多人都知道了,不多解释了)。
body {
 
    ...
 
    font-size: 62.5%;/* 此时,1em就相当于10px */
}
}
2、然后,我给最外层包裹的div设置样式:

.wrap {

font-size: 1.6em;/* 16px */

line-height: 2em;/* 16px*2em=32px */
}
}


这里直接又把字体改回16px了,实际操作中可能不这样也说不定。
3、接下来设置一下头部和底部:

.header {

...

line-height: 5em;/* 5em*16px=80px */

...
}
}
.
.footer {

...

line-height: 3em;/* 3em*16px=48px */

...
}
}


4、最后,按照实际所需的页面宽度设置内容区的宽度,我以1000px为例,因1000/16=0.625,所以内容区的宽度设为62.5em即可,里面的main和sider模块按照实际所需的宽度,计算一下比例即可,我这里主要内容区设为790px,侧栏为200px,中间有10px的空隙,样式如下:

.body {

width: 62.5em;/* 62.5em*16px=1000px */

/*min-width: 800px;

max-width: 1000px;*/

margin: 0 auto;

overflow: hidden;

zoom: 1;
}
}
.
.body .main {

...

float: left;

width: 79%;/* 790px */
}
}
.
.body .sider {

...

float: right;

width: 20%;/* 200px */
}
}


      最后,当打开页面,放大或缩小页面时,字体跟着变化,同时浮动的布局也没有被破坏。
      接下来,请单击查看Demo,可以放大或缩小页面试试~~
      最后的最后,算是一点点小技巧,就是页面中那张图是1280px宽的,默认插进来时是图片本来的宽度,会超出main区,当设置width为100%后,图片充满父元素可见区域,且宽高比和图片本来的宽高比相同。


原文地址:http://www.itmmd.com/201501/471.html
该文章由 萌萌的IT人 整理发布,转载须标明出处。

JavaScript 教程学习笔记——事件 event(一)   上一篇
下一篇  jQuery教程(11)-DOM树操作之DOM操作方法的简单归纳

精彩回复
发表评论
姓名:       

《程序员app》专门为程序员量身定做!