介绍
小编给大家分享一下前端开发怎么实现自适应布的局,希望大家阅读完这篇文章后大所收获、下面让我们一起去探讨吧!
首先我们来看<强>什么是自适应布局>
所谓自适应布局我们从百度上可以搜到如下的定义自适应设计指能使网页自适应显示在不同大小终端设备上新网页设计方式及技术。简单的来说自适应就是让同一个页面自动适应不同大小的设备,从而解决为不同设备提供不同版本的页面问题。
知道了自适应布局是怎么一回事后,那么我们就来看一看<强>自适应布局该如何实现>
页面的自适应布局分为高度自适应和宽度自适应,实现方式其实有挺多的,下面我们就来以三列布局为例来看看<强>自适应布局的实现方式。
<强>一、自适应布局之高度自适应
高度自适应就是把每个模块设置为绝对定位,然后设置中间自适应的模块的顶部和底部属性的值分别为头部模块和底部模块的高,然后中间模块的高度就自适应了。
高度自适应布局代码如下:
& lt; body>
& lt; div类=皌op"祝辞120 px
& lt; div类=癿ain"祝辞自适应& lt;/div>
& lt; div类=癰ottom"祝辞120 px
& lt;/body> .top {
宽度:100%;
身高:120 px;
位置:绝对的;
background - color: greenyellow;
}
.main {
位置:绝对的;
宽度:100%;
前:120像素;
底部:120 px;
背景颜色:粉色;
高度:汽车;
}
.bottom {
位置:绝对的;
底部:0;//别漏了
宽度:100%;
身高:120 px;
background - color: greenyellow;
} 高度自适应布局效果如下:
<强>二、自适应布局之宽度自适应
宽度自适应有三种方法,分别是用绝对定位,利用,中间模块先渲染;自身浮动。<强>
下面我们来分别看看这三种方法实现的自适应布局(三列)<强>
<强> 1,利用绝对定位来设置宽度自适应布局
说明:针对自适应模块使用绝对定位,在把左和右设置为左右两列的宽,其实原理和高度自适应一样,另外左右两列分别左右浮动。<强>
<>强绝对定位设置宽度自适应布局代码如下:
& lt; body>
& lt; div类=發eft"祝辞200 px
& lt; div类=癿ain"祝辞自适应& lt;/div>
& lt; div类=皉ight"祝辞200 px
html,
身体{
保证金:0;
高度:100%;
填充:0;
字体大小:30 px;
粗细:500;
text-align:中心;
}
.left,
铃声{
宽度:200 px;
显示:内联;
高度:100%;
background - color: greenyellow;
}
.left {
浮:左;
}
铃声{
浮:正确;
}
.main {
位置:绝对的;
左:200 px;
右:200 px;
高度:100%;
背景颜色:粉色;
显示:内联;
} <强>宽度自适应布局效果如下:
<强> 2,利用,中间模块先渲染来设置宽度自适应布局
说明:中间一列优先渲染的自适应三列布的局,优先渲染(加载)的关键:内容在html里面必须放在前面。自适应的div必须放在左和右前面且包含在一个父div里。父div,左和右模块都向左浮动,然后对自适应的div(就是父div里的子div)设置保证金:0 200 px,然后对左的margin-left的属性值设置为100%的负数,就是margin-left: -100%;对正确的margin-left的属性值设置为自身宽度的负数,就是margin-left: -200 px。
<强>注意:强自适应的div必须放在左和右前面且包含在一个父div里。
<>强利用,中间模块先渲染设置宽度自适应布局的代码如下:
& lt; body>
& lt; div类=癿ain"祝辞& lt; !——看清楚,这里用一个父div包住——比;
& lt; div类=癱ontent"祝辞自适应& lt;/div>
& lt;/div>
& lt; div类=發eft"祝辞200 px
