我創(chuàng)建了以下小提琴。小提琴 <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>我有一個限制，即在移動設(shè)備上網(wǎng)格將每行顯示 1 個數(shù)字。在平板電腦設(shè)備上每行 2 個數(shù)字，在臺式機和更大的設(shè)備上每行 3 個數(shù)字。如何定義“移動”取決于您，只要合理即可。上面的小提琴在移動設(shè)備和平板電腦上可以正常工作 - 但在移動設(shè)備上，它每行顯示 2 個數(shù)字。
1 回答
心有法竹
TA貢獻1866條經(jīng)驗 獲得超5個贊
您需要在頭部添加元標(biāo)記才能使移動媒體查詢正常工作：
<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 關(guān)注
- 127 瀏覽
添加回答
舉報
0/150
提交
取消