作者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/cn.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