作者mickeyboy (mic)
看板Web_Design
標題[問題] 關於CSS對於width的問題
時間Wed Mar 6 20:46:22 2019
請教關於css遇到的一些問題 想請教版上的前輩
假設我有個需求 類似在手機上 一個頁面顯示一張撲克牌
然後希望可以左右滑動 (類似一直往右發展 新增牌)
但不同手機上 width 跟 height不同
我原本是用Jquery 來抓取裝置 再來控制每個元件的大小
但這樣發現要抓的項目很多, 用百分比又會遇到一個點
一直想不太透,如果大方向都是使用%
但padding margin那些如果是固定的px 就會不太一樣了
請問對於不同手機上 如何讓畫面看起來是一樣的?
例如 也許 A按鈕30% B按鈕70% 但是如果需要padding margin 怎麼辦?
另外還有一個問題,想請教
如果 頁面是橫向的話 width 100%就無法使用了
這樣除了利用Jquery 去抓裝置的width外
純css有什麼寫法 可以做到同樣效果(width 100%)呢?
謝謝
--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 118.170.228.171
※ 文章網址: https://webptt.com/m.aspx?n=bbs/Web_Design/M.1551876386.A.2FC.html
1F：→ Ken52039: 100vw 100vh ? 03/06 21:05
2F：推 peanut97: %, px, em, rem 等等單位都是混用的。依我看過不少人 03/06 21:19
3F：→ peanut97: 的切版code，都是拿上面講的4個在混用。比例跟絕對像 03/06 21:19
4F：→ peanut97: 素，的確概念不一樣，但這目前就是各自為政，只要你寫 03/06 21:19
5F：→ peanut97: 得出來就好了。 03/06 21:19
6F：→ peanut97: 不同手機的話就是media query 勤勞多寫一點 03/06 21:19
7F：→ jherk: calc() 03/07 08:39
8F：→ shter: 100vw 03/07 11:35
9F：→ shter: width: 100vw; max-width:(你預期最寬不超過的px) 03/07 11:36
10F：推 lovejoe7010: 謝謝 我來試試看 03/07 22:43
11F：推 spongetama: 手機橫放可以多寫一個 query 定義orientation: landsc 03/07 22:56
12F：→ spongetama: ape；padding 跟 margin 用em或 rem 我覺得比較好，會 03/07 22:56
13F：→ spongetama: 根據你的字體大小變換。 03/07 22:56
14F：→ xdraculax: 留白固定比較好，字體大小是個人喜好，像我都調到 28 03/09 13:19
15F：→ xdraculax: 去了，留白沒必要跟著變 03/09 13:19
16F：→ LipaCat5566: 響應式斷點 svg 百分比跟vw vh的差別去看看 03/11 22:53
17F：→ mickeyboy: 感謝各位的建議 03/14 21:12
18F：推 kawaii98: 我個人是會用vw，rem，em，%混用 05/12 21:31