一个大的背景图片和几个按钮，怎么大小适中并居中显示在各屏幕手机上？

一个大的背景图片和几个按钮，怎么大小适中并居中显示在各屏幕手机上？

---

background-size和flexbox

---

百分比长宽就好，也可以根据像素设置长宽

---

可以参考bootstrap的图片响应式样式

---

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;
}

---

可以用媒体查询适配一下就好了。