Question

我正在UI中的聊天消息上显示插入符号。它们在中小型设备上看起来不错，但在大型和超大型设备上太小了。任何人都可以让我知道如何处理它。我试图显示：内联块并设置高度/宽度，但似乎不准确。谁能告诉我正确的方向

中型屏幕-

大屏幕-

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/

Answer 1

这根本不是一个真正的问题。在仿真器上看起来不一样，但在实际设备上运行良好。

在大屏幕和超大屏幕上，伪元素的大小太小

1 个答案: