欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

如何理解自适应布局

程序员文章站 2022-04-08 11:23:08
...
自适应布局就是让网页能够自适应的显示在不同大小的终端设备上,它对于某些大型的网站来说兼容性好,代码高效但是由于它需要开发多个界面来适应不同的设备因此修改难度大

自适应布局指的是能够使网页自适应显示在不同大小终端设备上的网页设计方式及技术。接下来在文章中将为大家具体介绍有关自适应布局的知识,具有一定的参考价值,希望对大家有所帮助

如何理解自适应布局

【推荐课程: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)图片可控性高

缺点

因为要适应不同的移动端设备屏幕,所以同一个网站,往往需要为不同的设备开发不同的页面,因而增加了开发成本。尤其是当需求发生改变时,可能会改动多套代码。流程繁琐。

总结:以上就是本篇文章的全部内容了,希望通过这篇文章可以帮助大家更好的理解自适应布局。

以上就是如何理解自适应布局的详细内容,更多请关注其它相关文章!

相关标签: 自适应布局