請教關於css遇到的一些問題 想請教版上的前輩
假設我有個需求 類似在手機上 一個頁面顯示一張撲克牌
然後希望可以左右滑動 (類似一直往右發展 新增牌)
但不同手機上 width 跟 height不同
我原本是用Jquery 來抓取裝置 再來控制每個元件的大小
但這樣發現要抓的項目很多, 用百分比又會遇到一個點
一直想不太透,如果大方向都是使用%
但padding margin那些如果是固定的px 就會不太一樣了
請問對於不同手機上 如何讓畫面看起來是一樣的?
例如 也許 A按鈕30% B按鈕70% 但是如果需要padding margin 怎麼辦?
另外還有一個問題,想請教
如果 頁面是橫向的話 width 100%就無法使用了
這樣除了利用Jquery 去抓裝置的width外
純css有什麼寫法 可以做到同樣效果(width 100%)呢?
謝謝

感謝各位的建議

100vw 100vh ?

%, px, em, rem 等等單位都是混用的。依我看過不少人的切版code，都是拿上面講的4個在混用。比例跟絕對像素，的確概念不一樣，但這目前就是各自為政，只要你寫得出來就好了。不同手機的話就是media query 勤勞多寫一點

calc()

100vwwidth: 100vw; max-width:(你預期最寬不超過的px)

謝謝 我來試試看

手機橫放可以多寫一個 query 定義orientation: landscape；padding 跟 margin 用em或 rem 我覺得比較好，會根據你的字體大小變換。

留白固定比較好，字體大小是個人喜好，像我都調到 28去了，留白沒必要跟著變

響應式斷點 svg 百分比跟vw vh的差別去看看

我個人是會用vw，rem，em，%混用