[問題] 關於CSS對於width的問題

[mickeyboy (mic)]

請教關於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://www.ptt.cc/bbs/Web_Design/M.1551876386.A.2FC.html
→ Ken52039: 100vw 100vh ?
推 peanut97: %, px, em, rem 等等單位都是混用的。依我看過不少人
→ peanut97: 的切版code，都是拿上面講的4個在混用。比例跟絕對像
→ peanut97: 素，的確概念不一樣，但這目前就是各自為政，只要你寫
→ peanut97: 得出來就好了。
→ peanut97: 不同手機的話就是media query 勤勞多寫一點
→ jherk: calc()
→ shter: 100vw
→ shter: width: 100vw;  max-width:(你預期最寬不超過的px)
推 lovejoe7010: 謝謝 我來試試看
推 spongetama: 手機橫放可以多寫一個 query 定義orientation: landsc
→ spongetama: ape；padding 跟 margin 用em或 rem 我覺得比較好，會
→ spongetama: 根據你的字體大小變換。
→ xdraculax: 留白固定比較好，字體大小是個人喜好，像我都調到 28
→ xdraculax:  去了，留白沒必要跟著變
→ LipaCat5566: 響應式斷點 svg  百分比跟vw vh的差別去看看
→ mickeyboy: 感謝各位的建議
推 kawaii98: 我個人是會用vw，rem，em，%混用