1、多倍图对实际开发的影响
1、测量值永远是物理像素值
2、测量值需要除以屏幕的倍数才能得到css像素值(一般为2倍图)
2、视口的设置
将默认视口设置等于理想视口,写在<head>
标签里,将网页宽度设置为设备宽度
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
3、百分比单位
特点:设置了百分比单位的盒子会随着父元素的宽度变化而变化
应用:
如果盒子不需要随着父元素的宽度变化而变化,则直接用px就可以
如果盒子需要随着父元素的宽度变化而变化,则用%单位
4、流式布局
1、什么是流式布局
在移动端使页面宽度可以随着设备的宽度变化而变化,像流水一样
2、实现流式布局的两种方式
2.1使用百分比单位来实现:
适用场景:子元素的宽度都是一样的,其中没有固定宽度的元素,都是自适应
设置每个元素的宽度为20%即可
2.2使用定位属性来实现(两端固定中间自适应)
例:横向状态
将元素设置为固定定位/绝对定位,然后将left/right分别等于左侧盒子和右侧盒子的宽度
适用场景:子元素中既有固定宽度的又有需要自适应宽度的元素
竖向状态,将中间盒子top/bottom分别等于上、下盒子的高度即可
<div class="search">
<div class="menu"></div>
<div class="sea"></div>
<div class="login"></div>
</div>
.search {
position: fixed;
width: 100%;
height: 44px;
background-color: #e43130;
}
.menu {
position: absolute;
left: 0;
top: 0;
width: 40px;
height: 44px;
background-color: chocolate;
}
.sea {
position: absolute;
left: 40px;
right: 40px;
height: 44px;
background-color: yellow;
}
.login {
position: absolute;
right: 0;
top: 0;
width: 40px;
height: 44px;
background-color: pink;
}