一个大的背景图片和几个按钮,怎么大小适中并居中显示在各屏幕手机上?
1、背景图片的多分辨率适配,可以用CSS3属性background-size:cover;
- 背景铺满元素
- 调整背景图片的宽度或高度(较小者),以铺满整个元素
- 保持背景图片的宽高比
.box {
background:url() center center no-repeat;
background-size:cover;
}
2、按钮元素在多分辨率进行居中,可以使用CSS3属性display: flex;
- 在flex容器中设置垂直居中或水平居中非常简单
- 只需要把 justify-content 和/或 align-items 设置到中间
.btn{
display: flex;
align-items: center;
justify-content: center;
}