css - 伪元素在大屏幕和超大屏幕上太小
问题描述
我在我的 UI 中的聊天消息上显示插入符号。它们在中小型设备上似乎很好,但在大型和超大型设备上却太小了。任何人都可以让我知道如何处理它。我试图显示:内联块并设置高度/宽度,但似乎不准确。谁能告诉我正确的方向
https://jsfiddle.net/7ba2od0L/
中型屏幕 -
大屏幕——
CSS -
.bot-msg::before{
top: 1px;
bottom: -3px;
left: -20px;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-bottom-color: #009fa8;
border-width: 10px;
right: -8px;
transform: rotate( 29deg ) skew( -35deg );
-moz-transform: rotate( 29deg ) skew( -35deg );
-ms-transform: rotate( 29deg ) skew( -35deg );
-o-transform: rotate( 29deg ) skew( -35deg );
-webkit-transform: rotate( 270deg ) skew( 0deg );
top: 6px;
}
HTML -
<body>
<div class="container">
<div class="chatbox">
<div id="speedtest">
</div>
<div class="chatbox-wrapper">
<div class="header">
<div class="barsection">
<ul >
<li class="clrbg"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div class="mediasection">
</div>
</div>
<div class="chat-history">
<ul class="main">
<!-- <span class="bot-msg-data-time">27 Feb, 06:17 PM</span> -->
<li class="bot-msg">
<div class="msgtext">Thanks, Scott for your interest in applying to HGS. I'm Sophie, your virtual assistant. Let's get started. I got your mobile number as 636-762-9733 & would like to verify it.
</div>
</li>
<li class="bot-msg">
<div class="msgtext">
Can I send you a one-time code over text (text charges may apply)?
<span class="tip">You can skip this if you like, just type </span>
</div>
</li>
这是一个供您参考的小提琴 - https://jsfiddle.net/7ba2od0L/
解决方案
这根本不是一个真正的问题。它在模拟器上看起来不同,但在实际设备上运行良好。
推荐阅读
- mysql - SQL将大量图像上传到数据库并与主键匹配
- reactjs - 如何使用 useReducer 来确定使用哪个 useState 变量?
- javascript - 在两个或多个特定页面中选择/取消选择全部复选框,而不影响数据表中的其他页面
- typescript - 打字稿记录
不检查密钥类型? - java - 如何打印出具有 ID 的数组中的最大值?
- r - 在r中将月-年转换为日期格式
- python - Pandas - 当字符串匹配时选择两个值之间的所有行
- regex - 匹配一组字符或什么都不匹配的正则表达式
- javascript - jquery 使警报等于名称数组
- django - Django REST Framework - UpdateModelMixin 不允许使用方法补丁