我正在嘗試讓按鈕具有基于屏幕尺寸的響應寬度。我已經得到了它，所以當我調整常規 Chrome 窗口的大小時它可以完美地工作，但是當我切換顯示以模仿設備（任何移動設備/ipad/等）時，按鈕的寬度立即變得更小。即使我在 iPhone 上打開它，它看起來也是一樣的，所以這不僅僅是 Chrome 工具的一些奇怪問題。當我檢查該元素時，我可以看到寬度已被禁用：我認為可能有一些 CSS 覆蓋了它，但這并不能解釋為什么當我只是調整 Chrome 的大小，甚至選擇一個分辨率比我的任何規則更寬的設備時，這種行為就會完全消失。我仍然嘗試刪除所有 @media 規則，但該行為仍然存在。該按鈕是非常基本的 HTML，它甚至沒有包含在可能導致問題的 div 中（除非它下面有一個彈性框可能是一個問題？）：<body> <button id="ranking-button" type="button" onclick="openRanking()">RANKING</button>所有相關的 CSS 都在這里：#ranking-button { position: fixed; top: 0; right: 0; margin: 20px; font-family: 'Black Han Sans', sans-serif; font-size: 24px; color: black; background-color: #ffcc00; width: 40%; height: 60px; cursor: pointer; border: 0em;}#ranking-button:hover { background-color: black; color: white;}button:focus{ outline: none;}@media (min-width: 600px) { #ranking-button { width: 200px; }}我也嘗試過添加!important它，然后它確實適用于移動設備 - 但隨后停止更改任何其他分辨率，并且始終停留在 40%。
2 回答
斯蒂芬大帝
TA貢獻1827條經驗 獲得超8個贊
我放棄了這個小項目，然后隨機意識到我在做一些完全不同的事情時做錯了什么 - 如果有人犯和我一樣的錯誤，我會設法忘記設置視口。添加這個使得 CSS 工作：
<meta name=viewport content="width=device-width, initial-scale=1">
拉風的咖菲貓
TA貢獻1995條經驗 獲得超2個贊
當您使用 @media 查詢時，當括號內的“規則”被接受時，它會在其中執行任何操作。
所以，如果你說 max-width:1000px 那么，如果你的瀏覽器是 600px 那么其中的任何內容都將適用，如果不是，那么它將被忽略。
對于小于 600px 的屏幕，您正常的 @media css 規則將被接受，并且您所說的寬度：40%，并且您無法以％為單位進行測量。
@media only screen and (max-width: 600px) {
#ranking-button {
width: 200px;
}
}
- 2 回答
- 0 關注
- 179 瀏覽
添加回答
舉報
0/150
提交
取消