前端流动式布局的计算公式

web的前端开发包括哪些
web前端开发常用工具有哪些
web前端开发有哪些技术

1、将网页从固定式布局修改为百分比布局的公式:
目标元素宽度÷上下文元素宽度×100%=百分比宽度
例如:
#wrapper{
/width: 960px;/
width: 96%;
margin-right: auto;
margin-left: auto;
}
这里的wrapper宽度是960px,body宽度为100%,所以wrapper的百分比宽度就是96%
例如:
[code] #header{
/margin-left: 10px;/
margin-left: 1.04166667%;
/margin-right: 10px;/
margin-right: 1.04166667%;
/width: 940px;/
width: 97.9166667%;
background-color: #dddddd;
}
[/code]
header的宽度是940px,那么940÷960×100%=97.9166667%,这就是header的百分比宽度
2、将文字用em单位替换px单位
公式仍然是目标元素的宽度÷上下文元素宽度×100%=百分比宽度
一般来说现代浏览器都会给默认文字大小设置为16px
但是最好还是在css文件中重申body元素中文字大小为16px
[code] body{
font-size: 100%;
font-size: 16px;
font-size: 1em;
}
[/code]
用em单位替换px单位的方式
如:
[code] #navigation ul li a{
text-decoration: none;
color: black;
height: 42px;
line-height: 42px;
text-transform: uppercase;
/font-size: 27px;/
font-size: 1.6875em;
}
[/code]
3、弹性图片(所有多媒体文件都可以应用)使图片随流动布局相应缩放
这个代码就太简单了,直接设置max-width为百分百就好了
[code] img{
max-width: 100%;
}[/code]
同样的,不仅仅是图片文件,video、embed等等都可以,但不支持iframe
[code] img,object,embed,video{
max-width: 100%;
}
[/code]
另外,为了避免某些标签下多媒体文件直接覆盖了百分百的面积,可以有针对的覆写其max-width样式:
[code] #content img{
max-width: 50%;
}
[/code]
某些图片较小的尺寸如果被拉得太大就会导致模糊问题,可以在css文件中加上max-width属性一个确定的px值:
[code] #content img{
max-width: 1920px;
}
[/code]

前端开发分为哪些工作
前端开发中标签有哪些
前端开发中用到哪些路由
» 本文来自:前端开发者 » 《前端流动式布局的计算公式》
» 本文链接地址:https://www.rokub.com/6486.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!