gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 07:49:46 27 4
gpt4 key购买 nike

在同一页面中,我想为桌面加载屏幕 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 - 手机 |使用自举 Accordion

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>

最佳答案

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

例子

<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

关于css - 如何根据设备大小呈现完全不同的 css 和 html?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30491338/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com