HTML学习（三）

最新推荐文章于 2024-07-08 16:42:42 发布

Andrew_Lii

最新推荐文章于 2024-07-08 16:42:42 发布

阅读量163

点赞数

分类专栏： html CSS 文章标签： HTML CSS 弹性布局

本文链接：https://blog.csdn.net/Andrew_Lii/article/details/80170246

版权

html 同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

CSS

2 篇文章 0 订阅

订阅专栏

本文介绍了如何使用em单位创建响应式布局。em单位能够根据父元素的字体大小进行缩放，非常适合制作适应不同屏幕尺寸的设计。文章还提供了一个具体的示例，展示了如何将em单位应用于实际的HTML和CSS代码中。

摘要由CSDN通过智能技术生成

em单位实现弹性布局

在编写网页时，开发者面对的硬件标准当然是自己面前的PC，但是每个人使用的硬件不可能都和自己的一样，当然对于前端开发来说，这个“硬件”主要是指屏幕尺寸和分辨率。如果只是写一些自己看demo的话，当然不用考虑适配问题，但是这样的场景肯定是少数。所以在其他场景下，弹性布局的优势就体现出来了，这里讲一讲使用单位em实现弹性布局。

首先，em，是诸多单位里唯一一个可以实现”相对”的单位，对适配多种设备的时候特别有帮助，它的参考物是父级元素的font-size，比如说当前父元素的font-size是20px，那么在它的子元素中，1em=20px，0.5em=10px，其余例推。

其次，em比使用百分比布局的优势在于，百分比布局无法解决一个宽度范围用一套逻辑的问题，而且我觉得思考的时候也不自然

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html" charset="UTF-8"/>
</head>

<body style="font-size: 400px">
    <div style="background-color: #ff6600;width: 1em;height: 0.5em">
    </div>
</body>
</html>

这里写图片描述

这里橙色div的宽高分别为400px和200px，与在父级元素设置的font-size大小成比例

现代浏览器的默认渲染字体大小为16px，所以在没有显示设置的情况下，在浏览器中1em=16px。

在这种布局设计中有一个关键的地方，那就是：在Web页面中所有的元素都必须使用em作为单位，这很好理解，因为你如果在Web页面中在某些地方不使用em作为单位，那么你设置的值就不是相对的，而是绝对的（当然，利用百分比布局之类的除外），可以试试在浏览器中把整个Web页面放大，看看没有使用em作为单位的地方会出现什么情况。

为了方便，我们可以在body中重写浏览器默认的font-size，把它改成0.625em(10px)。之后em单位的计算公式就可以简化成：
需要转化的像素值（px）/10（px）=em值

这是一个简单的例子
HTML：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html" charset="UTF-8"/>
    <link rel="stylesheet" href="练习1css.css" type="text/css">
</head>

<body>
    <div id="MegaloBox">
        <h>曾经的那份浪漫在此重新演绎</h>
        <p>
            <img src="images/JOE.png">
            这是一部从画风，设定，剧情到人物性格都以复古的风格展现的作品，有着上个世纪动画才有的浪漫主义色彩。
            在法律淡薄时期，弱肉强食的灰色地带，在这没有人为了明天而奋斗，没有人一步步的规划自己的人生，所有人都只为了眼前的这场鲜血的博弈而兴奋着，狂欢着，嘶吼着，有烟有酒即是快乐。他们从事者各种触及法律底线的交易，过着毫无未来可言的生活，看似每个人都如**走肉，但其实每个人都有着不为人知的过往。
            为擂台而生的JOE，在这样的环境中没有任何追逐理想的机会。为了生存，即使心中充满的不甘，却还是与一位独眼大叔靠着打假拳维持着生计。
            时常通过飙车来发泄怒火，每次都下定决心，下一拳要为了自己而打，但却从未摆脱过生活的束缚。
            直到他遇见了，命运为他安排的对手勇利，在两人的首次交锋中，JOE终于确定了自己心中的渴望因何而来，从此为了能走上勇利的舞台，他开始了燃烧自己的旅程。
        </p>
    </div>
</body>
</html>

CSS：

body{
    font-size: 0.625em;
    background-color: #e6e6e6;
}

#MegaloBox{
    width: 80em;
    height: 30em;
    margin: 3em auto;
    background-color: #FFFFFF;
    border: solid 0.1em #888888;
    text-align: center;
}

#MegaloBox h{
    font-family: "Microsoft Yahei",sans-serif;
    font-size: 3em;
}

#MegaloBox p{
    font-family: "Microsoft Yahei",sans-serif;
    font-size: 1.4em;
    line-height: 1.5em;
    text-align: left;
    margin: 2em;
}
#MegaloBox img{
    height: 10em;
    width: 8em;
    float: left;
    margin: 1em 1em 0 0;
}