0

https://www.airbnb.com/s/Oreg...

我发现airbnb一个东西我想研究但是偷不走
我知道是flex相关技术
只是他的又更特别
进去的时候你应该会看到五个col的房屋资讯,有好几行
浏览器先把宽度拉到最小〜变成手机版
此时会剩下一个
然后往右开始拖拉直到有两个col
从这里开始再往右拉到有四个col的时候
这段期间的变化我实在是想偷也偷不走
很明显外面的div跟里面的图片宽度是一致的
随着父的宽度会等比例放大
重点是原本的图片大小假设是160x100
他也会根据比例放大到320x200 ....之类的
这到底是怎么做到的?!
整個區塊會往右下角放大

asys0512 2.7k
2018-12-04 提问
2 个回答
0

已采纳

这种一般都是媒体查询啊,类似于这种写法,对每个具体的屏幕尺寸做适当调整

@media (max-width: 1030px) {
    .box {
        width:25%
    }
}

@media (max-width: 991px) {
    .box {
        width:33.3%
    }
}

@media (max-width: 721px) {
    .box {
        width:50%
    }
}

...
0

我觉得要实现这种布局有两种方式,一种是媒体查询,另外一种是用js监听resize事件,调整布局

撰写答案

推广链接