媒体查询 tool

web 移动端媒体查询 适用各种情况

原链接：https://blog.csdn.net/github_39427902/article/details/85234885 

@media screen and (max-width:569px){
    top: 7%;
    left: 18%;
}

.tooltip  {
                padding: 0 5px;
                margin-left: -3px;
                opacity:100;
                line-height: 21px;
                position:absolute;top: 21px;left: -97px;                      
                @media screen and (max-width:528px){  
                    line-height: 21px;
                    opacity:100;
                    position: absolute;top: 0px;left: -2px;               
            }               
            }
            .tooltip-arrow {position: absolute;border-color: transparent;border-style: solid; }                                               
            .tooltip .tooltip-arrow{top: 50%;right: -2px;margin-top:-7px;border-width:7px 0 7px 7px;border-left-color:red;
                                @media screen and (max-width:528px){
                            top: 50%;right: -2px;margin-top:-7px;border-width:7px 0 7px 7px;border-left-color:red;  }        
            }                   
            .tooltip-inner {max-width: 200px;padding: 3px 8px;text-align: center;background-color: red; border-radius: 0px;font-weight:bolder;padding-top:2px;font-size: 14px;color:white}

tooltip 缩小重新加载样式

<div class="price-panel"> 
    <div class="tooltip" role="tooltip">
        <div class="tooltip-arrow"></div>
            <div class="tooltip-inner">
             SAVE: £2440.00
            </div>
        </div>
<span class="price-rrp " data-price-original="209.99">RRP: £7209.99</span>
<div class="price-table" data-price-original="189.99">
    <div class="pence-now">NOW</div>
    <div class="price">£1879.99</div>
    </div>
</div>