我的HTML表單上的提交按鈕的「寬度」的Css樣式在移動設備上的尺寸無法正確設置

我的HTML表單上的提交按鈕的「寬度」樣式的CSS樣式在移動設備上尺寸不合適。它幾乎看起來像是達到了一個門檻，不會變得更薄，但會在桌面瀏覽器上？我的HTML表單上的提交按鈕的「寬度」的Css樣式在移動設備上的尺寸無法正確設置

HTML表單

<form method="post" action="contactengine.php"> 


    <input type="text" name="Email" value=" Enter email address" onfocus="if (this.value==' Enter email address') this.value='';"/> 
    <input type="submit" name="submit" value="+" /> 
</form>

CSS：

input[type=submit]{ 
border-radius: 20px; 
-webkit-appearance: none; 
width: 3.5%; 
position: absolute; 
bottom: 8%; 
left: 61%; 
height: 3.2%; 
border: none; 
background: #FF0000; 
color: #FFFFFF; 
font: 400 1.5em/.75em 'Source Sans Pro', sans-serif;

}

*媒體查詢爲iPhone 5例如

@media screen and (max-width:645px) { 


input[type=submit] { 
    bottom: 3%; 
    width:4.5%; 
    font: 300 1em/0.75em 'Source Sans Pro', sans-serif; 

} 

input[type=text] { 
    bottom: 3%; 

} 
}

這裏是什麼我的屏幕截圖在桌面與手機上。「提交」按鈕在桌面視圖中是循環的，但是在移動設備中伸縮？ Desktop View

Mobile View

來源

2016-05-27 Jesse Frank

發佈您正在嘗試的所有代碼 – mlegg

在css開發中有一個叫做Responsiveness的因子。你也試過了嗎？ –

嗨，Jesse，這裏提供你正在使用的代碼以及你迄今爲止嘗試過的最佳做法。這將讓人們更好地幫助你。 – Patrick

HTMLButtonElement有許多預定義的樣式選項。

在所有的瀏覽器中，它們是不同的，改變'寬度'是不夠的。

這裏是一個簡單的CSS按鈕重置。你可以在這裏設定你的價值。

button { 
    display: inline-block; 
    vertical-align: midddle; 
    margin: 0; 
    padding: 0; 
    border:0; 
    ouline:0; 
    width: auto; 
    height: auto; 
}

來源

2016-05-27 18:34:10

我的HTML表單上的提交按鈕的「寬度」的Css樣式在移動設備上的尺寸無法正確設置

回答

相關問題