ZBLOG

.confirm_modals_container { width: 100%; height: 100%; background: rgba(39, 39, 39, 0.6); position: fixed; top: 0; bottom: 0; left: 0; z-index: 333; .confirm_modals_box { height: 100%; display: flex; flex-direction: c...

要将 CSS 代码中的元素替换为2倍像素(即将所有的尺寸和字体大小乘以2),你可以按以下方式修改你的代码:

  1. .confirm_modals_container {
  2. width: 200%; /* 100% * 2 */
  3. height: 200%; /* 100% * 2 */
  4. background: rgba(39, 39, 39, 0.6);
  5. position: fixed;
  6. top: 0;
  7. bottom: 0;
  8. left: 0;
  9. z-index: 333;
  10. .confirm_modals_box {
  11. height: 200%; /* 原高度的2倍 */
  12. display: flex;
  13. flex-direction: column;
  14. align-items: center;
  15. justify-content: center;
  16. .confirm_modals_content {
  17. padding: 48px; /* 原padding的2倍 */
  18. width: 160%; /* 原宽度的1.6倍(80% * 2) */
  19. border-radius: 16px; /* 原圆角的2倍 */
  20. background-color: #fff;
  21. .confirm_modals_title {
  22. line-height: 48px; /* 原行高的2倍 */
  23. text-align: center;
  24. }
  25. .confirm_modals_btn {
  26. display: flex;
  27. justify-content: space-between;
  28. margin-top: 48px; /* 原上边距的2倍 */
  29. }
  30. .confirm_modals_btn_list {
  31. border-radius:660px; /* 原圆角的2倍 */
  32. font-family: PingFang SC;
  33. font-size:28px; /* 原字体大小的2倍 (14px *2)*/
  34. font-weight:500;
  35. line-height :28px;/* 字体行高也可以设置成两倍*/
  36. text-align:center;
  37. letter-spacing :0em;
  38. padding :22px ;/*原padding的两倍*/
  39. width :100%;
  40. color:#272727 ;
  41. border :1px solid #ccccce ;/*增加了一点厚度以保持一致性*/
  42. &:last-child {
  43. margin-left :16px ;/*原间距的两倍*/
  44. }
  45. }
  46. }
  47. }
  48. }
  49. .overflowClose {
  50. overflow:hidden ;
  51. }

修改说明:

  • 所有百分比都乘以了2。
  • 对于 paddingmarginborder-radiusfont-size 等值,均乘以了相应因子,以达到“二维”的效果。

请根据实际需要调整值,确保界面布局符合预期。


内容由零声教学AI助手提供,问题来源于学员提问

本站部分文章来源于网络,版权归原作者所有,如有侵权请联系站长删除。
转载请注明出处:https://golang.0voice.com/?id=19778

分享:
扫描分享到社交APP
上一篇
下一篇
发表列表
游客 游客
此处应有掌声~
评论列表

还没有评论,快来说点什么吧~

联系我们

在线咨询: 点击这里给我发消息

微信号:3007537140

上班时间: 10:30-22:30

关注我们
x

注册

已经有帐号?