如何使我的 HTML 适合移动视图（响应式 UI）
我从http://cssdeck.com/labs/pricingtables 复制了 3 个包（价格标签）源代码，当我将 CSS 和 HTML 代码嵌入到我的网站时，页面视图在我的 PC（桌面）上运行良好，但是当我使用我的手机（Android ) 不是所有的包都出现了，你能帮忙吗？
【问题讨论】：
标签： javascript css twitter-bootstrap jquery-mobile responsive-design
将此添加到您的头部标签：
如果您使用的是 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
希望对你有帮助
【讨论】：
试试下面的代码 sn-p。因为它利用了引导功能的基本元素。您可以检查不同移动设备上的 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">
【讨论】：
margin为margin: 0%;