自适应布局-使用css3函数clac()

使用使用css3函数clac()进行页面布局，页面可以自适应窗口大小。
优点：写起来很方便。
缺点：需要浏览器支持css3。
核心：calc可以用来计算长度。常用的有计算div高度height: clac(100% - 50px)、div宽度、字体间距letter-spacing: calc(14px * 10 / 6) 等。

代码：

<!DOCTYPE html>
<html><head><title>自适应布局-calc</title>
</head><body><div class="headContainer">顶部菜单栏</div><div class="bodyContainer"><div class="leftMenuCont">左侧菜单栏</div><div class="panelCont">CSS3 calc() 函数: <a href="https://www.html.cn/book/css/values/functional/calc().htm">https://www.html.cn/book/css/values/functional/calc().htm</a></div></div>
</body>
<style>* {padding: 0;margin: 0;}html,body {width: 100%;height: 100%;font-size: 100%;}body {min-width: 400px;min-height: 400px;}.headContainer {width: 100%;height: 50px;background-color: tan;}.bodyContainer {width: 100%;height: calc(100% - 50px);}.leftMenuCont {float: left;width: 300px;height: 100%;background-color: yellowgreen;}.panelCont {float: left;width: calc(100% - 300px);height: 100%;background-color: #f1f1f1;}
</style></html>

自适应布局-使用css3函数clac()相关推荐

rem css calc,关于使用rem单位、css函数calc()进行自适应布局
一.关于css中的单位大家都知道在css中的单位,一般都包括有px,%,em等单位,另外css3新增加一个单位rem. 其中px,%等单位平时在传统布局当中使用的比较频繁,大家也比较熟悉,不过px单 ...
css3 calc()自适应布局属性 ---浏览器版本兼容性的问题
"无意中发现了一个巨牛的人工智能教程,忍不住分享一下给大家.教程不仅是零基础,通俗易懂,而且非常风趣幽默,像看小说一样!觉得太牛了,所以分享给大家.点这里可以跳转到教程." 我们想 ...
谈谈利用JavaScript结合相对单位rem实现自适应布局的简单而实用的方法
谈谈利用JavaScript结合相对单位rem实现自适应布局的简单而实用的方法 rem是css3新增的一个相对单位,相对的只是HTML根元素,可以只修改根元素字体大小就可以成比例地调整所有字体大小.我 ...
这可能是史上最全的CSS自适应布局总结教程
标题严格遵守了新广告法,你再不爽,我也没犯法呀!话不多说,直入正题. 所谓布局,其实包含两个含义:尺寸与定位.也就是说,所有与尺寸和定位相关的属性,都可以用来布局. 大体上,布局中会用到的有:尺寸相关 ...
android中自适应布局教程,Android自适应布局设计技巧
由于目前在做的一款app需要适配手机和平板,所以我在研究怎么构建可适应所有屏幕尺寸的布局方法. 在web的自适应布局上我有很多经验,比如使用网格流,CSS3中的media queries属性等等,这些 ...
使用CSS实现三栏自适应布局（两边宽度固定，中间自适应）
所谓三列自适应布局指的是两边定宽,中间block宽度自适应.这里主要分为两大类,一类是基于position传统的实现,一类是基于css3新特性弹性盒模型布局实现. 1. 基于传统的position和m ...
css经典布局——头尾固定高度中间高度自适应布局
今天说说一个经典布局:头尾固定高度中间高度自适应布局! 转文请标明 --- 出处:穆乙 http://www.cnblogs.com/pigtail/ 相信做过后台管理界面的同学,都非常清楚这个布局. ...
CSS深入理解流体特性和BFC特性下多栏自适应布局
一.块状元素的流体特性与自适应布局块状元素像放在容器中的水流一样,内容区域会随着margin, padding, border的出现自动填满剩余空间,这就是块状元素的流体特性. 来一个小实验: di ...
php 网站移动端自适应,HTML5 移动端自适应布局
场景:为适应各种大小的屏幕自适应布局我知道的两种方式 1.使用媒体查询,下面制定了几种适应方式,例如第一个表示屏幕宽度在320px-360px之间的,html字体大小适配为13.65px @medi ...
html5 自适应手机布局,科技常识：html5移动端自适应布局的实现
今天小编跟大家讲解下有关html5移动端自适应布局的实现 ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关html5移动端自适应布局的实现的相关资料,希望小伙伴们看了有所帮助. 场景:为适 ...

自适应布局-使用css3函数clac()

自适应布局-使用css3函数clac()相关推荐

最新文章

热门文章