如何理解自适应布局
1个回答
展开全部
自适应布局就是让网页能够自适应的显示在不同大小的终端设备上，它对于某些大型的网站来说兼容性好，代码高效但是由于它需要开发多个界面来适应不同的设备因此修改难度大
自适应布局指的是能够使网页自适应显示在不同大小终端设备上的网页设计方式及技术。接下来在文章中将为大家具体介绍有关自适应布局的知识，具有一定的参考价值，希望对大家有所帮助
【推荐课程：CSS教程】
自适应布局：
自适应布局的特点是在不同的屏幕大小下设置不同的布局格式。也就是说在某个屏幕下元素在这块地方但是换一个不同尺寸的屏幕下，元素不一定还在原来的地方，有可能换了一个地方。它们主要是布局上的改变但元素并没有变化。这样的效果可以看成是不同屏幕下由多个静态布局组成的
例：实现两端固定中间自适应的布局
<style type="text/css">
p {margin: 0; }
.left {width: 300px; height: 200px; float: left; background: coral; margin-left: -100%;}
.right {width: 300px; height: 200px; float: left; background: lightblue; margin-left: -300px;}
.middle {width: 100%; height: 200px;float: left; background: lightpink; }
span{
display: inline-block;
margin: 0 200px;
}
</style>
<body>
<div class="wrap">
<p class="middle">
<span class="inner">
中间自适应
</span>
</p>
<p class="left">左边固定</p>
<p class="right">右边固定</p>
</div>效果图如下：
当把窗口缩小时就可以看到中间自适应的那部分的宽度变小
自适应布局的优点和缺点
优点
（1）对一些复杂性的大型网站它的兼容性更好，实施起来更加方便
（2）代码更加高效，测试更加容易。
（3）图片可控性高
缺点
因为要适应不同的移动端设备屏幕，所以同一个网站，往往需要为不同的设备开发不同的页面，因而增加了开发成本。尤其是当需求发生改变时，可能会改动多套代码。流程繁琐。
总结：
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
七鑫易维信息技术
2024-09-02 广告
Play Video 七鑫易维是致力于机器视觉和人工智能领域的高新科技企业，迄今已专注眼球追踪技术的研发、创新与应用超过14年，拥有完全自主知识产权，全球专利总量500余项。 作为眼球追踪技术领域的全球知名品牌，七鑫易维的产品体系覆盖眼动分...
点击进入详情页
本回答由七鑫易维信息技术提供
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
