How to make _dt icons responsive

I have this code below working on almost all functions.

The only thing missing to stay 100%, is to make it responsive.

Or at least reduce the size of each icon according to device dimensions.

I have tried in many ways, but without success.

If friends can give me a tip or even guide me what I should do to achieve my goal, I will be grateful.

Below the Code:

        <div style="max-width:30px; width:100%;" class="social_bar">
        <style>
        .social{
            display:block;
            width:30px;
            height:30px;
            background-image: url(img/Preta.png);
            float:left;
            margin-left:4px;
            overflow:hidden;
            text-indent:-999px;
            margin-bottom:4px;
        }

        .social_bar{
            margin-top:-100px;
            position:fixed;
            right: 7px;
            top: 50%;
            width:40px;
            z-index:9999;
            float:left;
        }

        #contato_dt{ background-position: 0 0;} 
        #instagram_dt{ background-position:-32px 0;}    
        #facebook_dt{ background-position:-64px 0;}
        #twitter_dt{ background-position:-96px 0;} 
        #youtube_dt{ background-position:-128px 0;} 
        </style>

        <a href="#" id="contato_dt" class="social" title="Contato Via E-mail"></a>
        <a target="_blank" href="#" id="instagram_dt" class="social" title="Acesso ao Instagram"></a>
        <a target="_blank" href="#" id="facebook_dt" class="social" title="Acesso ao Facebook"></a>
        <a target="_blank" href="#" id="twitter_dt" class="social" title="Acesso ao Twitter"></a>
        <a target="_blank" href="#" id="youtube_dt" class="social" title="Acesso ao Youtube"></a>
    </div>