css3 @media 根据不同设备设置不同高度

作者: wxfeng 分类: web前端 发布时间: 2017-02-17 00:00

使用bootstrap进行前端页面设计,对一个后端程序员来说是个利器,可以很方便的进行页面的布局构造,同时也能很好的适配不同设备;但是在实际使用中,发现不够灵活,比如在一横向列表页面展示图片时,由于原图的大小不一致,这样就会导致不同的列表元素高度不一,会使列表错乱,这时就需要固定住各个列表元素的高度,使列表不致错乱,而bootstrap是根据每个元素的宽度等比例设置高度的,无法达到目的。这时就需要针对不同设备设置不同高度。利用css3 @media 可实现,如下所示,当屏幕宽度小于768px时,设置图片高度为150px;当屏幕宽度大于768px时,设置图片高度为236px;

@media screen and (max-width: 768px) {
    .thumimg a img{
        height:150px;
    }
}
@media screen and (min-width: 768px) {
    .thumimg a img{
        height:236px;
    }
}

如果觉得我的文章对您有用,请随意赞赏。您的支持将鼓励我继续创作!

发表评论

电子邮件地址不会被公开。 必填项已用*标注