移動聯繫表

Question

我掙扎了一下與此聯繫人的形式在我的網站： http://www.sandhtestsite.kaylynnehatch.com/contact-us.html

我試圖讓它與移動（該網站的其餘部分很好地工作按比例縮小使用@mobile屏幕標籤在CSS中）。

形式本身進行堆疊，該字段不需要浮動或什麼，但我想有容器和文本區域縮小到更適合手機屏幕。

我使用@mobile屏幕，在CSS中#contactus元素嘗試，但它似乎並沒有工作。有什麼建議麼？

Answer 1

有幾個問題，你正在處理。讓我們一一瀏覽它們：

1. 將聯繫表格加載到iframe中，這會使事情不必要地複雜化。
2. textarea有cols="50"集，它將移動屏幕側面的寬度擴大。
3. fieldset設置爲width的320px，除了規則：padding: 20px。通過以下CSS，字段將爲360px寬。

---

#contactus fieldset { 
    width: 320px; 
    padding: 20px; 
    /* width (320px + (20px*2)) == 360px */ 
} 

---

此外，你可能會發現開發者工具（如Firebug）或鉻/ Safari開發工具這樣的時代不可缺少的。通過這些，您可以快速輕鬆地突出顯示屏幕溢出的元素，並在觀看設計的同時更改CSS實時。這是一個真正的節省時間。

textarea元素關於cols，這個問題可能是有好處：sizing a textarea with CSS vs with cols and rows