如何使我的HTML适合移动视图（响应式用户界面）
我已经从http://cssdeck.com/labs/pricingtables中删除了3个包（价格标签）源代码，当我将CSS和HTML代码嵌入到我的网站时，页面视图使用我的PC（桌面）工作正常，但当我使用我的手机（Android）时并非所有包出现，你能帮忙吗？
试试下面的代码片段。因为它使用了引导功能的基本元素。您可以检查不同移动设备上的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>
请参考使用bootstrap的不同组件作为http://getbootstrap.com/components/
将其添加到您的<head>标签中
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1.0">
将此添加到您的头标记：
您正在使用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
希望有所帮助