Question

说我有一个.parent元素。如果我的媒体查询低于600px .parent，我希望@media (max-width: 600px) {}中的每个子元素的大小（宽度，字体大小）减少20％。

我能用这么简单的方法吗？

编辑：.post是父元素

<div class="post">              

        <img src="/media/wallpaper.jpg" class="thumbnail">

        <div class="post_text_div">
                <h1>test</h1>
        </div>
            <h5 class="username">username</h5>
            <span class="timesince">
                2 days
            </span>
            <span class="number_of_comments">
                <p>0</p>
            <img src="/static/images/commentIcon.png">
            </span>

    </div>

Answer 1

我＆＃39;使用此代码实现调整大小：

$('.parent').resizable({
    resize: function (e, ui) {
        var resizedWidth = $(this).outerWidth()/$(this).data("width");
        var resizedHeight = $(this).outerHeight()/$(this).data("height");

        $(this).find("*").each(function (i, element) {
            var width = $(element).data("width") * resizedWidth;
            var height = $(element).data("height") * resizedHeight;
            var fontsize = $(element).data("fontSize") * ((resizedHeight > resizedWidth) ? resizedWidth : resizedHeight);
            $(element).css({
                "width": width,
                "height": height,
                "font-size": fontsize
            });
        });
    },
});

此代码将初始化您的元素：

$('.parent').each(function(){
    $(this).data("height", $(this).outerHeight());
    $(this).data("width", $(this).outerWidth());
});

此代码将调整您的属性（高度，宽度，fontSize）

$('.parent *').each(function(){
    $(this).data("height", $(this).outerHeight());
    $(this).data("width", $(this).outerWidth());
    $(this).data("fontSize", parseInt($(this).css("font-size")));
});

只需将.parent类添加到父容器中即可。

但我真的建议您使用媒体查询。 100％更安全更简单的解决方案：）

希望这有帮助！如果您有任何问题，请告诉我。

将元素内的所有子元素减少一定的百分比？

1 个答案: