Question

嗨伙计们我尝试使用html和css制作电子邮件签名。而且我有一个很好的最终产品，但只有一个问题。当屏幕像移动设备一样太小时，它会打破所有线条并使其看起来很难看。我希望有人可以帮助我。

谢谢。这是整个代码。

<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<link href='https://fonts.googleapis.com/css?family=Roboto:400,500,700' rel='stylesheet' type='text/css'>
<title>Assinatura CR Resistências</title>
<style type="text/css">
    * {
        margin: 0;
        padding: 0;
        font-family: 'Roboto', sans-serif;

    }
    .nome-completo{
        font-weight: 700;
        font-size: 22px;
        color: #144fa2;
        display: block;
        float: left;
    }
    .setor{
        line-height: normal;
        font-weight: 500;
        font-size: 12px;
        color: #144fa2;
        padding: 2px 6px;
        background: #f7ec3d;
        border-radius: 4px;
        display: inline-block;
        margin: 3px 0px 10px 10px;
    }
    .logo{
        float: left;
        display: block;
        padding-right: 6px;
        padding-bottom: 60px;

    }
    i{
        color: #144fa2;
    }
    .contact {
        font-size: 14px;
        line-height: normal;
        color: #144fa2;
        padding-top: 2px;
        display: block;
    }
    .contact1 {
        font-size: 14px;
        line-height: normal;
        color: #144fa2;
        padding-top: 10px;
        padding-right: 10px;
        padding-left: 8px;
        display: inline-block;

    }
    .contact2 {
        font-size: 14px;
        line-height: normal;
        color: #144fa2;
        padding-top: 2px;
        padding-right: 10px;
        padding-left: 8px;
        display: inline-block;
    }
    .address{
        color: #144fa2;
        font-weight: 400;
        padding-top: 7px;
        padding-bottom: 7px;
    }
    .vertical-line{
        border-left: 3px solid #144fa2;
        height: 85px;
        float: left;
        padding-right: 12px;
    }
    .contact-icons-text{
        display: inline-block;
    }
    a {
        color: #144fa2;
        text-decoration: none;
    }
    a:hover{
        color: #c9ba32;
    }
    ::selection {
        background: #f7ec3d;
    }
    icons {
        float: left;
    }
</style>
</head>
<body>
<div class="bg-block">
    <img class="logo" src="http://imgh.us/logo-cr.svg"  width="140px" height="87px" draggable="false" title="CR Indústria e Comércio de Resistências Elétricas" alt="CR Indústria e Comércio de Resistências Elétricas">
    <div class="vertical-line"></div>
    <p class="nome-completo">NOME COMPLETO</p>
    <p class="setor">Setor/Posição</p><br/>
    <div class="contact-icons-text">
        <img class="icons" src="http://imgh.us/home_21.svg" alt="Home" width="13px" height="13px"><p class="contact1"><a href="http://cr-resistencias.com.br/" title="Visite nosso site">cr-resistencias.com.br&nbsp;&nbsp;&nbsp;&nbsp;|</a></p>
        <img class="icons" src="http://imgh.us/envelope_6.svg" alt="Mail" width="13px" height="13px"><p class="contact1"><a href="mailto:email@cr-resistencias.com.br" title="Envie um email">email@cr-resistencias.com.br</a></p><br/>
        <img class="icons" src="http://imgh.us/phone-receiver.svg" alt="Phone" width="13px" height="13px"><p class="contact2"><a href="tel:4732050120" title="Ligar">+55 (47) 3205-0120&nbsp;&nbsp;&nbsp;&nbsp;|</a></p>
        <img class="icons" src="http://imgh.us/location-pin.svg" alt="Location" width="13px" height="13px"><p class="contact2"><a href="" title="Abrir no mapas">Guilherme Boldt, 124 - Pirabeiraba - Joinville/SC</a></p><br/>
    </div>
</div>
</body>
</html>

停止打破html + css中的行

0 个答案: