CSS - 無法更改移動設備的文本框的寬度/高度

我在用戶設備尺寸後嘗試調整CSS時遇到問題。我正在使用以下代碼：CSS - 無法更改移動設備的文本框的寬度/高度

@media only screen and (max-width: 700px) { 
#form input[type=text] 
    { 
    width: 100px; 
    height: 50px; 
    margin: 95px -60px 0 15px; 
    box-shadow: inset 0px 0px 3px 1px grey; 
    border:1px lightgrey solid; 
    border-radius: 4px; 
    text-align: center; 
    font-family: times; 
    font-size: 10px; 
} 
}

所有設置都可以正確應用並更改原始CSS，但尺寸保持不變，但保持不變。這怎麼可能？這是一個CSS錯誤？如果有些應用選擇器是正確的，但所有維度都沒有。這不是一個緩存問題，我嘗試過幾種設備。

我很欣賞的幫助，弗雷德裏克

來源

2013-11-15 Fredrik

你能不能張貼一個鏈接到你的代碼？

問題只發生在移動設備上嗎？當您將瀏覽器窗口的大小調整爲小於700像素的寬度時會發生什麼？

通常，這種類型的錯誤是由於在您的代碼中某處存在過於具體的選擇器，這使得它們很難覆蓋。

嘗試在聲明的結尾處添加重要的代碼，以查看樣式是否可以被覆蓋。注意其通常不好的做法，即離開！重要的是，所以如果這適用於您，請搜索您的代碼以查找違規選擇器並進行調整，直到您的媒體查詢可以覆蓋。

來源

2013-11-15 16:06:02

非常感謝您的回覆。增加！重要的確確有效，這很奇怪，因爲除了正常的屬性外，沒有其他的定義。此外，如果物業之間出現干擾，是不是所有的物品都會被徹底覆蓋？只有文本框的實際尺寸纔會生效，其餘的工作正常。你能否詳細說明爲什麼使用！重要是特定條件下的不良做法？有沒有什麼需要注意的，也許有兼容性？再次，非常感謝！ – Fredrik

在看不到您的代碼的情況下很難分辨出來。出於幾個原因，這是不好的做法。首先，所有瀏覽器都不支持重要聲明。例如Internet Explorer。但是，由於您在移動網頁中使用它，它可能適合您。請務必在android和iPhone上檢查幾個移動瀏覽器版本。 –

第二，你基本上告訴瀏覽器會忽略任何在文檔中與「層疊樣式表」相矛盾的地方改變選擇器的嘗試。最後，任何時候你想在樣式表中稍後重寫該樣式，你將不得不重新添加重要的問題，這會延長問題並增加文件大小到你的css文檔。 –

CSS - 無法更改移動設備的文本框的寬度/高度

回答

相關問題