响应式布局css样式

核心css

/*图片列表样式*/
.img-list{ margin:-15px 0 0 -15px; *display:inline-block; }
/*响应式布局*/
@media screen and (min-device-width: 1161px) {   //针对电脑端大分辨率 最小1161像素,使用大括号内的样式
    .img-list {
        width: 940px;
        margin-top: -15px;
        margin: -15px 0 0 -15px;
        *display: inline-block;
    }
}

@media screen and (max-device-width: 400px) {     //如果屏幕宽度小于400像素,则使用大括号内的样式
    .img-list {
        width: 708px;
        margin-top: -15px;
        margin: -15px 0 0 -15px;
        *display: inline-block;
    }
}

参考:https://www.cnblogs.com/BearLee/p/7928860.html

posted @ 2018-08-29 15:56  阴翳公子  阅读(933)  评论(0编辑  收藏  举报