Problems with Responsive

Question

I started building a website today and my project should only be for mobile phones and tablets, so I studied a little bit about responsiveness.

The problem is I made the site resolution-based and forgot the DPI, there is some way to make the automatic conversion to a DPI greater through CSS?

I’ve been reading about media queries with DPR, but that way I have to edit resolutions at hand, treat Divs for devices with DPR of 1,1.3,2 ?

Here is my CSS code:

@charset "utf-8";
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,600);
@media only screen and (-moz-min-device-pixel-ratio: 2), 
       only screen and (-o-min-device-pixel-ratio: 2/1), 
       only screen and (-webkit-min-device-pixel-ratio: 2), 
       only screen and (min-device-pixel-ratio: 2) {
#tool_bar{height: 10px;}
}   
body {
    /*overflow:hidden;*/
    font-family: 'Open Sans', sans-serif;
}
#pagina {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 200%;
    background-color: white;
    z-index: 10;
    -webkit-animation: fadein 3s; /* Safari, Chrome and Opera > 12.1 */
    -moz-animation: fadein 3s; /* Firefox < 16 */
    -ms-animation: fadein 3s; /* Internet Explorer */
    -o-animation: fadein 3s; /* Opera < 12.1 */
    animation: fadein 3s;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}
@keyframes fadein {
    from { opacity: 1; }
    to   { opacity: 0; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 1; }
    to   { opacity: 0; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 1; }
    to   { opacity: 0; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 1; }
    to   { opacity: 0; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 1; }
    to   { opacity: 0; }
}
#tool_bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 47px;
    font-size: 1.5em;
    color: white;
    background-color: #2cab51;
    -webkit-box-shadow: 0px 20px 67px -6px rgba(0,0,0,1);
    -moz-box-shadow: 0px 20px 67px -6px rgba(0,0,0,1);
    box-shadow: 0px 20px 67px -6px rgba(0,0,0,1);
    z-index: 10;
}
.bem_vindo {
    position: relative;
    top: 10%;
    left: 10px;
    font-weight: 100;
    text-shadow: 4px 4px 6px rgba(150, 150, 150, 1);
    z-index: 10;
}
.bem_vindo_iph {
    position: relative;
    top: 10%;
    left: 10px;
    font-weight: 100;
    display: none;
    text-shadow: 4px 4px 6px rgba(150, 150, 150, 1);
    z-index: 10;
}
@media screen and (min-width: 640px) {
    .bem_vindo_iph {
        display: block;
    }
    .bem_vindo  {
        display: none;
    }   
}
#bot_menu {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 40px;
    height: 40px;
    background-color: #2cab51;
    border: 0;
    background-image: url("imagem/menu.png");
    z-index: 10;
}
#menu {
    position: fixed;
    top: 31px;
    right: 0px;
    width:180px;
    _width:180px; /* hack para IE */
    text-align: right;
    font-weight: 100;
    display: none;
    padding:0px;
    background-color: #21803c;
    -webkit-box-shadow: -64px 82px 94px -41px rgba(0,0,0,0.75);
    -moz-box-shadow: -64px 82px 94px -41px rgba(0,0,0,0.75);
    box-shadow: -64px 82px 94px -41px rgba(0,0,0,0.75);
    z-index: 15;
}
#menu ul {
    widht:110px;
    padding:0;
    margin:0;
}
#menu li {  
    list-style: none;   
    padding:0; 
}
#menu li a {    
    display: block;
    padding-right: 10px;
    color: #ffffff;  
    text-decoration: none; 
    padding-top: 4px;
    padding-bottom: 4px;
}
#menu li a:visited {    
    color: #ffffff; 
}
#menu li a:hover {  
    color: #000;    
    background-color:#fff;
}
#conteudo {
    position: absolute;
    top: 47px;
    left: 0;
    width: 100%;
    height: 2000px;
    background-image: url("imagem/repet.png"),url("imagem/hotel.png");
    background-repeat: repeat-y;
    background-attachment: fixed;
    background-size: cover;
    background-color: #464646;
}
#logo {
    position:relative;
    height: 270px;
    margin-top: 4px;
    margin-left: auto;
    margin-right: auto;
    border: 1px solid black;
    background-image: url("imagem/logso.png");
    background-repeat: no-repeat;
    background-size: 100%;
}
#inf_hotel {
    position:relative;
    width: 99%;
    margin-left: auto;
    margin-right: auto;
    color: white;
    z-index: 5;
}
#inf_hotel div {
    width: 60px;
    height: 60px;
    border-radius: 100%;
    background-color: white;
    float: left;
}
#inf_hotel p {
    position: relative;
    top: 16px;
    left: 10px;
}
#texto_1 {
    width: 98%;
    margin-left: auto;
    margin-right: auto;
    color: white;
    font-size: 0.8em;
    background-color: rgb(0, 0, 0);
    background-color: rgba(0, 0, 0, 0.3);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
}
#texto_1 p {
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
    padding: 8px; 
}
#teste {
    position:relative;
    width: 99%;
    height: 296px;
    margin-top: 4px;
    margin-left: auto;
    margin-right: auto;
    border: 1px solid black;
    background-color: white;
}
#tes {
    width: 99%;
    margin-left: auto;
    margin-right: auto;
    border: 1px solid black;
}
@media screen and (min-width: 640px) {
    #teste {
        float: left;
        margin-left: 2px;
        position:relative;
        width: 300px;
    }
    #tes {width: 608px;}
    #texto_1 p {font-size: 12pt;}
}

My website: http://marceloprojeto.esy.es/