Question

如何使我的HTML适合移动视图（响应式用户界面）

我已经从http://cssdeck.com/labs/pricingtables处理了3个包（价格标签）源代码，当我将CSS和HTML代码嵌入到我的网站时，页面视图使用我的PC（桌面）工作正常但是当我使用时我的手机（Android）并非出现所有套餐，你能帮忙吗？

My website

Answer 1

将其添加到您的<head>代码

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1.0">

Answer 2

将此添加到您的头标记：

您正在使用Twitter Bootstrap，将此类添加到main / wrapper div：

<div id="Wrapper" class="container">

否则，请查看有关css媒体查询的一些信息，并将其添加到样式表中。

编辑：由于您正在使用WP，请找到您的functions.php并添加文件;

function my_scripts_enqueue() {
wp_register_script( 'bootstrap-js', get_template_directory_uri() . '/js/bootstrap.min.js', array('jquery'), NULL, true );
wp_register_style( 'bootstrap-css', get_template_directory_uri() . '/css/bootstrap.min.css', false, NULL, 'all' );


wp_enqueue_script( 'bootstrap-js' );
wp_enqueue_style( 'bootstrap-css' );
}
add_action( 'wp_enqueue_scripts', 'my_scripts_enqueue' );

关于媒体查询，请看一下这篇文章;

http://stackoverflow.com/questions/12045893/which-are-the-most-important-media-queries-to-use-in-creating-mobile-responsive

希望有所帮助

Answer 3

尝试以下代码段。因为它使用了引导功能的基本元素。您可以检查不同移动设备上的UI响应。

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <body>
        <!--Added class row -->
        <div class="page-container row">
            <!---Added col-lg-4 class -->
           <!-- Total 12 columns are divided into 3 parts as col-lg-4 -->
            <div class="pricing-table col-lg-4">
                <div class="pricing-table-header">
                    <h2>Personal Site</h2>
                    <h3>$15/month</h3>
                </div>
                <div class="pricing-table-space"></div>
                <div class="pricing-table-features">
                    <p><strong>50</strong> Email Addresses</p>
                    <p><strong>35GB</strong> of Storage</p>
                    <p><strong>40</strong> Databases</p>
                    <p><strong>10</strong> Domains</p>
                    <p><strong>24/7 Unlimited</strong> Support</p>
                </div>
                <div class="pricing-table-sign-up">
                  <p><a href="http://bloggingbolt.blogspot.com">Sign Up Now</a></p>
                </div>
            </div>

            <div class="pricing-table pricing-table-highlighted col-lg-4">
                <div class="pricing-table-header">
                    <h2>Small Business</h2>
                    <h3>$59/month</h3>
                </div>
                <div class="pricing-table-space"></div>
                <div class="pricing-table-text">
                    <p><strong>This is a perfect choice for small businesses and startups.</strong></p>
                </div>
                <div class="pricing-table-features">
                    <p><strong>Unlimited</strong> Email Addresses</p>
                    <p><strong>65GB</strong> of Storage</p>
                    <p><strong>75</strong> Databases</p>
                    <p><strong>25</strong> Domains</p>
                    <p><strong>24/7 Unlimited</strong> Support</p>
                </div>
                <div class="pricing-table-sign-up">
                    <p><a href="http://bloggingbolt.blogspot.com">Sign Up Now</a></p>
                </div>
            </div>

            <div class="pricing-table col-lg-4">
                <div class="pricing-table-header">
                    <h2>Corporate Site</h2>
                    <h3>$85/month</h3>
                </div>
                <div class="pricing-table-space"></div>
                <div class="pricing-table-features">
                    <p><strong>Unlimited</strong> Email Addresses</p>
                    <p><strong>85GB</strong> of Storage</p>
                    <p><strong>Unlimited</strong> Databases</p>
                    <p><strong>50</strong> Domains</p>
                    <p><strong>24/7 Unlimited</strong> Support</p>
                </div>
                <div class="pricing-table-sign-up">
                    <p><a href="http://bloggingbolt.blogspot.com">Sign Up Now</a></p>
                </div>
            </div>

        </div>

    </body>

</html>

将引导程序的不同组件的使用称为http://getbootstrap.com/components/

如何使我的HTML适合移动视图

3 个答案: