页面布局
- 流式布局
适用页面特点:一般使用于–左侧固定+右侧自适应;左右固定宽度+中间自适应
通俗来讲容器百分比自适应
需求:左边宽高不变,右边宽度随着屏幕变化自适应
<div class="box">
<div class="left">左边固定宽高,右边像液体一样流动</div>
<div class="right">随着屏幕宽度变化而变化</div>
</div>
<style>
body,html{
height: 100%;
}
*{
margin: 0;
padding: 0;
}
.box{
width: 100%;
height: 100%;
}
.left{
width: 100px;
background: red;
height: 100px;
float: left;
}
.right{
height: 100%;
overflow: hidden;
/*触发bfc*/
background: green;
}
</style>
.right如果不设置overflow:hidden;那么宽度将始终占满整个屏幕,呈现上下布局了,流式布局只能做宽度的适配…
2. 响应式布局
一个网站能够兼容多个终端
主要利用了媒体查询,bootstrap提供了栅格系统等也很好的做适配,但高度一般都是固定的,不会随着屏幕的变化而变化…
3. 伸缩布局
在伸缩盒子里面,我们可以给子盒子分配宽度,但无法分配高度
即:flex只给宽度设置,高度不会随着容器的变化而变化
rem布局
REM是相对单位,是相对HTML根元素
认识Rem(rem是什么)
rem作用于非根元素时,相对于根元素字体大小;rem作用于根元素字体大小时,相对于其出初始字体大小
- 现在.html的body写下两个元素
<div class="rem">REM</div>
<div class="em">EM</div>
设置他们的字体大小
.rem{
font-size: 2rem;
}
.em{
font-size: 2em;
}
结果如下
接着我们在设置body字体元素的大小
body{
font-size: 30px;
}
效果如下,明显的变化,rem没有变化,em变化了
接着我们给文档的html设置字体大小
我们可以发现rem和em一样大小,都是两倍放大
html{
font-size: 30px;
}
REM与EM
- rem是单位,由浏览器转换为像素值
- em作为font-size的单位时,其代表父元素的字体大小,em作为其他属性单位时,代表自身字体大小
从上可以看出:rem 单位基于 html 元素的字体大小,由浏览器转换为像素值,具体取决于您的设计中的字体大小设置,是灵活、 可扩展的单位
- rem是灵活的单位,可以控制元素整体放大缩小
我们继续给我们的页面.rem添加类
.rem{
font-size: 2rem;
width: 10rem;
height: 5rem;
background:red;
}
也就是只要页根元素(html)的字体变化,宽高也会自适应发生变化
为什么要用Rem布局
- 当我们要做宽高自适应布局,整体缩放的布局,rem布局比较适合使用,如苏宁的M端
- 一些偏向app类的,图标类的,图片类的,比如淘宝,活动页面,rem比较适合使用- 为什么使用rem不使用em
- 有些人买大屏幕手机可能就是为了让字体看得更大,rem布局就起到了很好的用户体验
- 对em不是很了解从上面以为rem基于页根元素,
em基于body元素,其实em不是基于body元素,也不是基于其父元素,只是因为字体的继承,其实em作为容器大小基于当前的字体尺寸 - 了解了em,如果使用em做,其复杂程度可想而知
- em牵一发而动全身,某个发生变化,其后代也可能发生变化,维护更难
- 对em不是很了解从上面以为rem基于页根元素,
怎么用Rem布局
既然rem基于html根元素,可以控制元素的整体放大和缩放,做弹性布局一般是基于屏幕的宽度,也就是我们只要通过媒体查询@media或则js控制根元素的字体大小,根据屏幕的宽度大小,相对于根元素设置元素大小,就可以达到我们想要元素的整体适应屏幕的效果。
- 因为用户可能会禁用掉了js,加上一般来说,都是先加载css在加载js的,所以我们选择使用媒体查询来控制元素的大小
- 使用媒体查询结合css使用
/*假设的设备 320px */
@media (min-width: 320px) {
html{
font-size: 50px;
}
}
- 如果多种设备我们就要写多次配置,还要计算各屏幕的值,此时我们可以使用less,便于我们代码的维护,提高我们的效率
- 使用less和媒体查询,结合实际情况(苏宁webapp)使用Rem布局
这是我们截取头部的图片,它的设计稿的宽度750px;设计的根元素字体大小为100px,导航栏的高度是90px,宽度是750px;此时导航栏的高度应该设置为90rem/100=0.9rem,
假设设计稿宽度为75px;设计的根元素则10px;这样导航栏高度为9px;依旧是9rem/10=0.9rem
也就是说 100/750 = 10/75(预设基准值(已知)/设计稿宽度(已知)= 设备的基准值(未知)/屏幕宽度(已知))
所以根据主流屏幕,我们使用less配置一套适用的方案
@charset "UTF-8";
//现在主流设备的屏幕宽度
@adapterDeviceList:750px,720px,640px,540px,480px,424px,414px,400px,384px,375px,360px,320px;
//设计稿尺寸(我们拿到的UE图)
@psdWidth:750px;
//预设基准值(根元素)
@baseFontSize:100px;
//设备的种类(我们定义设备的多少)
@len:length(@adapterDeviceList);
//生成各个主流设备对应的字体大小
.adapterMixin(@index) when ( @index > 0){
@media (min-width: extract(@adapterDeviceList,@index)){
html{
font-size: @baseFontSize / @psdWidth * extract(@adapterDeviceList,@index);
}
}
.adapterMixin( @index - 1);
}
.adapterMixin(@len);
//此时我们的苏宁导航栏的容器应该为
.suning{
width: 100%;
height: 0.9rem;
background: #fabc09;
}
<header>
<div class="suning"></div>
</header>
这样宽度高度就会随着容器的变化而变化
总结
每种方案都有优缺点,应寻找适合的适配方案