Open zsio opened 7 years ago
接上一篇CSS布局 基本上,有四种可选的布局类型: 1.固定宽度布局 2.自适应布局 3.弹性布局 4.混合布局
2.1.动态网格布局 网格设计体现了秩序和精确。网格允许使用对齐、对称、适当的空白,从战略和系统上来组织排版和设计元素。最终实现令人愉悦和易读的设计。 2.2.自适应的流式布局 为解决不同屏幕分辨率情况下内容自适应问题,写几套css样式通过js获取浏览器宽度getBrowserWidth()来替换不同css。讲真,这种方法还是无法接受的。随之被@media媒体查询取代。 3.弹性(可缩放)布局 弹性设计有一个关键地方Web页面中所有元素都使用“em”单位值。“em”是一个相对的大小,我们可以这样来设置1em,0.5em,1.5em等,而且“em”还可以指定到小数点后三位,比如“1.365em”。 1、浏览器的默认字体大小是16px 2、如果元素自身没有设置字体大小,那么元素自身上的所有属性值如“boder、width、height、padding、margin、line-height”等值,我们都可以按下面的公式来计算: 1 ÷ 父元素的font-size × 需要转换的像素值 = em值 4.混合布局 字体和容器大小使用em,然后巧妙地混合使用百分比和像素设置余下的布局元素。 最后可查阅的总结性文章:固定布局、流动布局、弹性布局哪一种适合你
变量作用域:
周末回家,请假了
倒计时16天
签到