PTT數位生活區 / Web_Design

[問題] 關於CSS對於手機上的問題

看板Web_Design作者 (mic)時間5年前 (2019/03/06 20:46), 編輯推噓4(4推 0噓 14→)
留言18則, 10人參與, 5年前最新討論串1/1
請教關於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
→
03/06 21:05, 5年前 , 1F
100vw 100vh ?
03/06 21:05, 1F
推
03/06 21:19, 5年前 , 2F
%, px, em, rem 等等單位都是混用的。依我看過不少人
03/06 21:19, 2F
→
03/06 21:19, 5年前 , 3F
的切版code，都是拿上面講的4個在混用。比例跟絕對像
03/06 21:19, 3F
→
03/06 21:19, 5年前 , 4F
素，的確概念不一樣，但這目前就是各自為政，只要你寫
03/06 21:19, 4F
→
03/06 21:19, 5年前 , 5F
得出來就好了。
03/06 21:19, 5F
→
03/06 21:19, 5年前 , 6F
不同手機的話就是media query 勤勞多寫一點
03/06 21:19, 6F
→
03/07 08:39, 5年前 , 7F
calc()
03/07 08:39, 7F
→
03/07 11:35, 5年前 , 8F
100vw
03/07 11:35, 8F
→
03/07 11:36, 5年前 , 9F
width: 100vw; max-width:(你預期最寬不超過的px)
03/07 11:36, 9F
推
03/07 22:43, 5年前 , 10F
謝謝 我來試試看
03/07 22:43, 10F
推
03/07 22:56, 5年前 , 11F
手機橫放可以多寫一個 query 定義orientation: landsc
03/07 22:56, 11F
→
03/07 22:56, 5年前 , 12F
ape；padding 跟 margin 用em或 rem 我覺得比較好，會
03/07 22:56, 12F
→
03/07 22:56, 5年前 , 13F
根據你的字體大小變換。
03/07 22:56, 13F
→
03/09 13:19, 5年前 , 14F
留白固定比較好，字體大小是個人喜好，像我都調到 28
03/09 13:19, 14F
→
03/09 13:19, 5年前 , 15F
去了，留白沒必要跟著變
03/09 13:19, 15F
→
03/11 22:53, 5年前 , 16F
響應式斷點 svg 百分比跟vw vh的差別去看看
03/11 22:53, 16F
→
03/14 21:12, 5年前 , 17F
感謝各位的建議
03/14 21:12, 17F
推
05/12 21:31, 5年前 , 18F
我個人是會用vw，rem，em，%混用
05/12 21:31, 18F
‣ 更多 mickeyboy 的文章
文章代碼(AID): #1SVy4YBy (Web_Design)
Web_Design 近期熱門文章
更多 近期熱門文章 >>
PTT數位生活區 即時熱門文章
更多 即時熱門文章 >>
‣ 更多 mickeyboy 的文章
文章代碼(AID): #1SVy4YBy (Web_Design)