如何将网页中的特定部分带到移动视图

Question

我正在使用bootstrap来创建一个网站。我需要在移动视图中的其他位置使用一个部分，但我不想要重复的代码。

Answer 1

您可以使用css样式设置另一个具有差异宽度的页面显示。如下代码所示：

@media only screen and（max-width：1100px）{your styles ...}

@media only screen and（max-width：843px）{your styles ...}

Answer 2

＆＃13;

＆＃13;

(function($) {
    var $window = $(window),
        $html = $('html');

    $window.resize(function resize() {
        if ($window.width() < 514) {
            return $html.addClass('mobile');
        }

        $html.removeClass('mobile');
    }).trigger('resize');
})(jQuery);

＆＃13;

html {
    background: white;
    color: red;
    font-size: 1.4em;
}
html.mobile {
    background: blue;
    color: white;
    font-size: 1em;
}

Like that you can add section according to screen size.

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>I am text.</>

＆＃13;

＆＃13;

＆＃13;