我创建了以下小提琴。小提琴 <span class="item__collection"> <button class="item__button">1</button> <button class="item__button">2</button> <button class="item__button">3</button> <button class="item__button">4</button> <button class="item__button">5</button> <button class="item__button">6</button> <button class="item__button">7</button> <button class="item__button">8</button> <button class="item__button">9</button> <button class="item__button">10</button> </span><style> .item__collection { display: flex; flex-direction: column; margin: 0 auto; max-width: 1024px; -webkit-user-select: none; -ms-user-select: none; user-select: none;}/* Device = Mobiles (Landscape), Tablets, Ipads, Laptops, Desktops Screen = from 481px and above*/@media (min-width: 481px) { .item__collection{ flex-flow: row wrap; }}.item__button { height: 150px; flex: 100%; margin-top: 2px; margin-bottom: 2px; display: flex; justify-content: center; align-items: center; font-size: 4em; border: 1px dotted gainsboro; cursor: pointer; background: transparent; border-radius: 3px;}.item__button:focus { border: none; outline: none;}.item__button:hover { border: none; background: gainsboro;}/* Device = Laptops, Desktops Screen = from 1025px to higher resolution desktops*/@media (min-width: 1025px) { .item__button { flex: 33%; }}/* Device = Mobiles (Landscape), Tablets, Ipads Screen = from 481px to 1024px*/@media (min-width: 481px) and (max-width: 1024px) { .item__button { flex: 49%; }}</style>我有一个限制，即在移动设备上网格将每行显示 1 个数字。在平板电脑设备上每行 2 个数字，在台式机和更大的设备上每行 3 个数字。如何定义“移动”取决于您，只要合理即可。上面的小提琴在移动设备和平板电脑上可以正常工作 - 但在移动设备上，它每行显示 2 个数字。
1 回答
心有法竹
TA贡献1866条经验 获得超5个赞
您需要在头部添加元标记才能使移动媒体查询正常工作：
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
body{
margin: 0;
padding: 0;
font-size: 14px;
}
.item__collection {
display: flex;
flex-direction: column;
margin: 0 auto;
max-width: 1024px;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}
.item__button {
height: 150px;
flex: 100%;
margin-top: 2px;
margin-bottom: 2px;
display: flex;
justify-content: center;
align-items: center;
font-size: 4em;
border: 1px dotted gainsboro;
cursor: pointer;
background: transparent;
border-radius: 3px;
}
.item__button:focus {
border: none;
outline: none;
}
.item__button:hover {
border: none;
background: gainsboro;
}
@media screen and (min-width: 481px) {
.item__collection{
flex-flow: row wrap;
}
}
@media screen and (min-width: 1025px) {
.item__button {
flex: 33%;
}
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
.item__button {
flex: 49%;
}
}
@media screen and (max-width: 767px) {
.item__button {
flex: 100%;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Document</title>
</head>
<body>
<span class="item__collection">
<button class="item__button">1</button>
<button class="item__button">2</button>
<button class="item__button">3</button>
<button class="item__button">4</button>
<button class="item__button">5</button>
<button class="item__button">6</button>
<button class="item__button">7</button>
<button class="item__button">8</button>
<button class="item__button">9</button>
<button class="item__button">10</button>
</span>
- 1 回答
- 0 关注
- 44 浏览
添加回答
举报
0/150
提交
取消