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

时间:2017-06-27 05:37:51

标签: jquery html css twitter-bootstrap

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

2 个答案:

答案 0 :(得分:0)

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

@media only screen and(max-width:1100px){your styles ...}

@media only screen and(max-width:843px){your styles ...}

答案 1 :(得分:0)



(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;