介绍 & lt;风格类型=拔谋?css"比;
p{保证金:0;}
.left{宽度:300 px;身高:200 px;浮:左;背景:珊瑚;margin-left: -100%;}
铃声{宽度:300 px;身高:200 px;浮:左;背景:lightblue;margin-left: -300 px;}
.middle{宽度:100%;身高:200 px;浮动:左;背景:lightpink;}
跨度{
显示:inline-block;
保证金:0 200 px;
}
& lt;/style>
& lt; body>
& lt; div类=皐rap"祝辞
类& lt; p=癿iddle"祝辞
& lt;跨类=癷nner"祝辞
中间自适应
& lt;/span>
& lt;/p>
类& lt; p=發eft"祝辞左边固定& lt;/p>
类& lt; p=皉ight"祝辞右边固定& lt;/p>
& lt;/div>
小编给大家分享一下CSS实现自适应布局的方法,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获、下面让我们一起去了解一下吧!
,自适应布局就是让网页能够自适应的显示在不同大小的终端设备上,它对于某些大型的网站来说兼容性好,代码高效但是由于它需要开发多个界面来适应不同的设备因此修改难度大
自适应布局指的是能够使网页自适应显示在不同大小终端设备上的网页设计方式及技术。
<>强自适应布局:
自适应布局的特点是在不同的屏幕大小下设置不同的布局格式。也就是说在某个屏幕下元素在这块地方但是换一个不同尺寸的屏幕下,元素不一定还在原来的地方,有可能换了一个地方。它们主要是布局上的改变但元素并没有变化。这样的效果可以看成是不同屏幕下由多个静态布局组成的
例:实现两端固定中间自适应的布局
效果图如下:
当把窗口缩小时就可以看到中间自适应的那部分的宽度变小
<>强自适应布局的优点和缺点
<>强优点
(1)对一些复杂性的大型网站它的兼容性更好,实施起来更加方便
(2)代码更加高效、测试更加容易。
(3)图片可控性高
<强>缺点
因为要适应不同的移动端设备屏幕,所以同一个网站,往往需要为不同的设备开发不同的页面,因而增加了开发成本。尤其是当需求发生改变时,可能会改动多套代码。流程繁琐。
以上是CSS实现自适应布局的方法的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注行业资讯频道!
