个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
24
4
我无法让我的媒体休息时间按预期工作。我希望得到与 Bootstrap 的网格系统类似的结果，如下所示:
第一种情况:当宽度等于或大于992px时:
Three identical col-4 type columns containing the different paragraphs
第二种情况:当宽度在768px到991px之间时:
Two identical col-6 columns, with the third one being a col-12 type column (obviously below the two).
第三种情况:当宽度等于或小于767px时:
Three identical col-12 type columns stacked one over the other.
我遇到的麻烦比我应该得到的休息时间还要多，但我终究不知道哪里出了问题。
这是我的代码。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Our Menu</title>
<link href="https://fonts.googleapis.com/css?family=Sansita" rel="stylesheet">
<style>
/***Base Styles***/
* {
box-sizing: border-box;
}
body {
font-family: 'Sansita', sans-serif;
letter-spacing: 1.5px;
background-color: beige;
}
.restaurant {
margin: 0 20px 0 20px;
}
h1 {
font-size: 50px;
text-align: center;
margin-bottom: 70px;
margin-top: 60px;
}
h2 {
font-size: 25px;
text-align: center;
border: 2px solid black;
padding-bottom: 3px;
width: 180px;
}
p {
padding: 35px 10px 10px 10px;
}
#meal1,
#meal2,
#meal3 {
background-color: khaki;
border: 2px solid black;
margin-bottom: 20px;
}
.meal1 {
background-color: #F4C2C2;
}
.meal2 {
background-color: #B22222;
}
.meal3 {
background-color: grey;
}
@media (min-width: 992px) {
#meal1 {
width: 32%;
float: left;
margin-right: 25px;
}
#meal2 {
width: 32%;
float: left;
}
#meal3 {
width: 32%;
float: left;
margin-left: 25px;
}
}
/***Tablet Styles***/
@media (min-width: 768) and (max-width: 991px) {
#meal1 {
width: 48.46%;
float: left;
margin-right: 10px;
margin-bottom: 20px;
}
#meal2 {
width: 48.46%;
float: left;
margin-left: 10px;
margin-bottom: 20px;
}
#meal3 {
width: 100%;
float: left;
}
}
/***Mobile Styles***/
@media (max-width: 767) {
#meal1,
#meal2,
#meal3 {
width: 100%;
}
}
</style>
</head>
<body>
<div class="restaurant">
<h1>Our Menu</h1>
<div class="meals">
<div id="meal1">
<h2 class="meal1">Smoked Fish</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc et tellus dictum, accumsan nunc sit amet, porttitor turpis. Phasellus orci felis, accumsan eu cursus ac, venenatis non massa. Mauris eget nisi pellentesque, luctus quam a, lacinia augue.</p>
</div>
<div id="meal2">
<h2 class="meal2">Spicy Coppa</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc et tellus dictum, accumsan nunc sit amet, porttitor turpis. Phasellus orci felis, accumsan eu cursus ac, venenatis non massa. Mauris eget nisi pellentesque, luctus quam a, lacinia augue.</p>
</div>
<div id="meal3">
<h2 class="meal3">Fregola Salda</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc et tellus dictum, accumsan nunc sit amet, porttitor turpis. Phasellus orci felis, accumsan eu cursus ac, venenatis non massa. Mauris eget nisi pellentesque, luctus quam a, lacinia augue.</p>
</div>
</div>
</div>
</body>
</html>最佳答案
使用a validator .您的 CSS 中存在机器可检测的错误。
@media (min-width: 768) and (max-width: 991px) {
您反复(尽管不是普遍)指定了一个没有单位的非零长度。这会使 CSS 无效，因此将被忽略。
关于html - 为什么我的媒体查询没有响应？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42040779/
24
4
0
我有三张 table 。表 A 有选项名称(即颜色、尺寸)。表 B 有选项值名称(即蓝色、红色、黑色等)。表C通过将选项名称id和选项名称值id放在一起来建立关系。 我的查询需要显示值和选项的名称，而
在mysql中，如何计算一行中的非空单元格？我只想计算某些列之间的单元格，比如第 3-10 列之间的单元格。不是所有的列...同样，仅在该行中。 最佳答案 如果你想这样做，只能在 sql 中使用名称而
关闭。这个问题需要多问focused 。目前不接受答案。 想要改进此问题吗？更新问题，使其仅关注一个问题 editing this post . 已关闭 7 年前。 Improve this ques
我正在为版本7.6进行Elasticsearch查询 我的查询是这样的: { "query": { "bool": { "should": [ {
关闭。这个问题需要多问focused 。目前不接受答案。 想要改进此问题吗？更新问题，使其仅关注一个问题 editing this post . 已关闭 7 年前。 Improve this ques
是否可以编写一个查询来检查任一子查询(而不是一个子查询)是否正确？ SELECT * FROM employees e WHERE NOT EXISTS (
我找到了很多关于我的问题的答案，但问题没有解决 我有表格，有数据，例如: Data 1 Data 2 Data 3
以下查询返回错误: 查询: SELECT Id, FirstName, LastName, OwnerId, PersonEmail FROM Account WHERE lower(PersonEm
以下查询返回错误: 查询: SELECT Id, FirstName, LastName, OwnerId, PersonEmail FROM Account WHERE lower(PersonEm
我从 EditText 中获取了 String 值。以及提交查询的按钮。 String sql=editQuery.getText().toString();// SELECT * FROM empl
我有一个或多或少有效的查询(关于结果)，但处理大约需要 45 秒。这对于在 GUI 中呈现数据来说肯定太长了。 所以我的需求是找到一个更快/更高效的查询(几毫秒左右会很好)我的数据表大约有 3000
这是我第一次使用 Stack Overflow，所以我希望我以正确的方式提出这个问题。 我有 2 个 SQL 查询，我正在尝试比较和识别缺失值，尽管我无法将 NULL 字段添加到第二个查询中以识别缺失
什么是动态 SQL 查询？何时需要使用动态 SQL 查询？我使用的是 SQL Server 2005。 最佳答案 这里有几篇文章: Introduction to Dynamic SQL Dynami
include "mysql.php"; $query= "SELECT ID,name,displayname,established,summary,searchlink,im
我有一个查询要“转换”为 mysql。这是查询: select top 5 * from (select id, firstName, lastName, sum(fileSize) as To
通过我的研究，我发现至少从 EF 4.1 开始，EF 查询上的 .ToString() 方法将返回要运行的 SQL。事实上，这对我来说非常有用，使用 Entity Framework 5 和 6。 但
我在构造查询来执行以下操作时遇到问题: 按activity_type_id过滤联系人，仅显示最近事件具有所需activity_type_id或为NULL(无事件)的联系人 表格结构如下: 一个联系人可
如何让我输入数据库的信息在输入数据 5 分钟后自行更新？ 假设我有一张 table : +--+--+-----+ |id|ip|count| +--+--+-----+ |
我正在尝试搜索正好是 4 位数字的 ID，我知道我需要使用 LENGTH() 字符串函数，但找不到如何使用它的示例。我正在尝试以下(和其他变体)但它们不起作用。 SELECT max(car_id)
我有一个在 mysql 上运行良好的 sql 查询(查询 + 连接): select sum(pa.price) from user u , purchase pu , pack pa where (
我是一名优秀的程序员,十分优秀！