如何根据设备大小呈现完全不同的css和html？

时间：2015-05-27 19:21:04

标签： css twitter-bootstrap-3

在同一页面中，我想为桌面加载屏幕1，为移动设备加载屏幕2。

屏幕1 - 桌面|简单的自举脚手架|单选按钮

enter image description here

这是桌面html页面的代码，下面是移动设备的代码。但我想将两个代码合并为一个。

关于如何在同一页面上制作它的任何指导/指导都会很棒！ 

<body>


  <div class="container">
    <div class="row">
        <div class="col-sm-4 col-md-4">
                        <h4 class="panel-title">
                   <input type="radio" name="sex" value="male">Elite - d<br>         
                        </h4>
                    <div id="collapseOne" class="panel-collapse collapse in">
                        <div class="panel-body">
                            <table class="table">
                                <tr>
                                    <td>
                                        10 Days of Cloud options
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        Up to 15 Cameras
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        Unlimited Support
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        $44 99 / Mo
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>



        <div class="col-sm-4 col-md-4">
                        <h4 class="panel-title">
                    <input type="radio" name="sex" value="male">Premier - d<br>            
                        </h4>
                    <div id="collapseOne" class="panel-collapse collapse in">
                        <div class="panel-body">
                            <table class="table">
                                <tr>
                                    <td>
                                        10 Days of Cloud options
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        Up to 15 Cameras
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        Unlimited Support
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        $44 99 / Mo
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>



        <div class="col-sm-4 col-md-4">
                        <h4 class="panel-title">
                        <input type="radio" name="sex" value="male"> Basic - d<br> 

                        </h4>
                    <div id="collapseOne" class="panel-collapse collapse in">
                        <div class="panel-body">
                            <table class="table">
                                <tr>
                                    <td>
                                        10 Days of Cloud options
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        Up to 15 Cameras
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        Unlimited Support
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        $44 99 / Mo
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>





    </div>
</div>




</body>
</html>

屏幕2 - 手机|使用bootstrap accordian

enter image description here 

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>



  <div class="container">
    <div class="row">
        <div class="col-sm-12 col-md-12">
            <div class="panel-group" id="accordion">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4 class="panel-title">
                            <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"><span class="glyphicon glyphicon-folder-close">
                            </span>Elite</a>
                        </h4>
                    </div>
                    <div id="collapseOne" class="panel-collapse collapse in">
                        <div class="panel-body">
                            <table class="table">
                                <tr>
                                    <td>
                                        60 Days of Cloud Recording
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        Up to 15 Cameras
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        Unlimited Support
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        $14 99 / Mo
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4 class="panel-title">
                            <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"><span class="glyphicon glyphicon-th">
                            </span>PREMIER</a>
                        </h4>
                    </div>
                    <div id="collapseTwo" class="panel-collapse collapse">
                        <div class="panel-body">
                       <table class="table">
                                <tr>
                                    <td>
                                        60 Days of Cloud Recording
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        Up to 15 Cameras
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        Unlimited Support
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        $14 99 / Mo
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4 class="panel-title">
                            <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree"><span class="glyphicon glyphicon-user">
                            </span>BASIC</a>
                        </h4>
                    </div>
                    <div id="collapseThree" class="panel-collapse collapse">
                        <div class="panel-body">
                       <table class="table">
                                <tr>
                                    <td>
                                        60 Days of Cloud Recording
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        Up to 15 Cameras
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        Unlimited Support
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        $14 99 / Mo
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>




</body>
</html>

1 个答案:

答案 0 :(得分：0)

您还可以根据屏幕宽度创建媒体查询，然后链接它们 在您的HTML文档的头部。您必须为每个视图创建单独的样式。

例如

<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 768px)" href="tablet.css" />

<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px)" href="phone.css" />

只需根据屏幕宽度使用css显示属性隐藏/显示div。

最佳做法是确保将所有自定义CSS合并到一个文件中。

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

相关问题
最新问题