CSS para adaptar web

[skat]

Hola,
tengo una web antigua hecha con dreamweaver, quiero mantenerla así pero adaptarla a dispositivos móviles. Me dijeron que utilizando otro archivo css con los comandos adecuados para que cargue ese archivo cuando se ve la web desde un móvil podría valerme.

¿alguien podría facilitarme algún archivo css ya adaptado a móvil y que se cargue cuando entras desde el móvil para poder utilizarlos en mi web y ya cambiaré yo después colores, tamaños de letras y estilos?

Gracias

[AngelKrak]

se llaman Media Querys amigo, esas te hacen el diseño responsive de tu pagina para adaptarlo a moviles >_<

ahi te dejo los codigos de las Medias querys si no sabes como se usan te recomiendo que busques informacion sobre las Media Querys ;)

Código CSS:

@Media All and (min-width:200px) and (max-width:800px) {Aqui va tu codigo}
 
@media (max-width: 750px) {Aqui va tu codigo}
 
@media screen and (min-width: 300px){Aqui va tu codigo}
 

[skat]

Hola,
Muchas gracias por esas líneas. A lo que yo me refería era si alguien me podía pasar un archivo CSS completo pensado solo para activarse cuando se consulte la web desde un móvil
Gracias

[martinmiranda90]

Iniciado por skat

Hola,
Muchas gracias por esas líneas. A lo que yo me refería era si alguien me podía pasar un archivo CSS completo pensado solo para activarse cuando se consulte la web desde un móvil
Gracias

Hola. Cada página web es un mundo y como tal hay que tratarlas. Para hacer que una web sea responsiva tienes que hacer como el compañero ha clarificado arriba, con media queries.
También tienes la opción de plugins como Bootstrap o foundation.
Un saludo

[lauser]

Iniciado por skat

Hola,
Muchas gracias por esas líneas. A lo que yo me refería era si alguien me podía pasar un archivo CSS completo pensado solo para activarse cuando se consulte la web desde un móvil
Gracias

No es muy recomendable... pero si no tienes conocimientos y no puedes contratar a un profesional. Siempre puedes recurrir a: sitio1 o sitio2.

[Gustavo1973]

Tengo un problema similar, pero con chrome.
Con firefox (al menos el emulador) funciona con el emulador de Chrome no!!!
Codigo del css

Código CSS:

@font-face {
  font-family: "FreesiaUPC";
  src: url("../css/upcfl.eot");
}
@font-face {
  font-family: "FreesiaUPC";
  src: url("../css/upcfl.ttf");
}
 
@media screen and (max-width : 420px)
{   
 
    body{
        background-color:#eeeeee;
        font-family: Arial;
        margin:0;
        width:360px;
    }
    header
    {
        background-color:#ffffff;
        width:360px;
        margin:0;
 
    }
    header .iso9001
    {
        display: none;
    }
    header .contlayus
    {
        width:360px;
        height:280px;
        overflow:visible;
    }
    header .ofertas
    {
        width:360px;
    }
    header .ofertas div
    {
        float:left;
    }
    header .ofertas img
    {
        width:120px;
    }
    header .solapas
    {
        float:none;
        border:1px dotted #ffffff;
    }
    header .solapas table
    {
        width:360px;
        /*margin:25px 0;*/
        
    }
    header .iconos img
    {
        width:90px;
        height:58px;
    }
    header .iconos table
    {
        width:360px;
    }
    header #menu ul{
        list-style: none;
        font-size: 14px;
        margin:0;
        padding:0;
    } 
 
    header #menu li{
        display: block;
        text-transform: uppercase;
        text-align: left;
    }
    header #nav-mobile{
        display: none;
        background: url("../imagenes/nav.png") no-repeat left center;
        width: 360px;
        height: 50px;
        /*position: relative;
        top:0;*/
 
    }   
 
    header #nav-mobile{ display: block; }
    header #menu{
        width: 100%;
        float: none;
        margin:0 0 5px 0;
        padding:0;
    }
    header #menu ul{
 
        max-height: 0;
        overflow: hidden;
        margin:0;
    }
    header #menu li{
        background: #20337f; 
        height: 20px;
        float: none;    
        margin:0;
        padding: 5px 10px;
        text-align:center;
        font-size:18px;
        border-bottom:1px solid #ffffff;
 
    }
 
    header #menu li:last-child{ border-bottom: 1;}
    header #menu li a{
        
        line-height: normal;
        color:#ffffff;
        font-weight: bold;
        text-transform:uppercase;
        text-decoration:none;
 
    }
    header #menu ul.open-menu{
        max-height: 420px;
        -webkit-transition: max-height .4s;
        -moz-transition: max-height .4s;
        -ms-transition: max-height .4s;
        -o-transition: max-height .4s;
        transition: max-height .4s;
    }
    /********** agenda ********************/
    header #agenda ul{
        list-style: none;
        font-size: 14px;
        margin:0;
        padding:0;
    } 
 
    header #agenda li{
        display: block;
        text-transform: uppercase;
        text-align: left;
    }
    header #tit-mobile{
        display: none;
        background: url("../imagenes/nav-agenda.png") no-repeat left center;
        width: 360px;
        height: 30px;
        /*position: relative;
        top:0;*/
    }   
    header #agenda .tit-mobile
        {
            font-family: "FreesiaUPC", "Arial";
            font-size:0px;
            color:#ffffff;
            height:60px;
            padding:0 5px;
        }
    header #tit-mobile{ display: block; }
    header #agenda{
        width: 360px;
        float: none;
        margin:0 0 5px 0;
        padding:0;
    }
    header #agenda ul{
 
        max-height: 0;
        overflow: hidden;
        margin:0;
    }
    header #agenda li{
        background: #20337f; 
        height: 20px;
        float: none;    
        margin:0;
        padding: 5px 10px;
        text-align:center;
        font-size:18px;
        border-bottom:1px solid #ffffff;
 
    }
 
    header #agenda li:last-child{ border-bottom: 1;}
    header #agenda li a{
        
        line-height: normal;
        color:#ffffff;
        font-weight: bold;
        text-transform:uppercase;
        text-decoration:none;
 
    }
    header #agenda ul.open-menu{
        max-height: 420px;
        -webkit-transition: max-height .4s;
        -moz-transition: max-height .4s;
        -ms-transition: max-height .4s;
        -o-transition: max-height .4s;
        transition: max-height .4s;
        background: url("../imagenes/nav2.png") no-repeat left center;
    }
}
@media screen and (min-width: 421px)
{
    body{
    background-color:#eeeeee;
    font-family: Arial;
    margin:0;
    width:100%;
}
header
{
    background-color:#ffffff;
    width:100%;
    min-height:575px;
    margin:0;
}
        header .navigation-toggle
        {
            
        }
        header #menu
        {
            width:950px;
            text-align:right;
            float:right;
            height:0;
            position:relative;
            z-index:1;
            top:-70px;
            left:130px;
            padding:0 0px 0 0;
        }
        header #menu ul
        {
            overflow:hidden;
            list-style:none;
            margin-top:20px;
        }
        header #menu ul li {
            float:left;
        }
        header #menu ul li a
        {
            padding: 0 2px;
            color:#000000;
            text-decoration:none;
            font-family: "FreesiaUPC", "Arial";
            font-size:21px;
            text-transform:uppercase;
        }
        header #menu ul li a:hover
        {
            background-color:#DEE1E6;
        }
        header .logo
        {
            text-align:left;
            overflow:visible;
            width:1010px;
            height:100px;   
            margin:0;
            padding:0;
 
        }
        header .logo2
        {
            width:640px;
            float:left;
            padding: 0 0 0 0px;
            overflow:hidden;
        }
        header .telefono
        {
            float:right;
        }
        header .contlayus
        {
            width:1010px;
            height:250px;
            overflow:hidden;
            position:relative;
            top:-15px;
            
        }
        header .ofertas
        {
            width:200px;
            padding:20px 0 0 20px;
            float:left;
            overflow:auto;
            margin:0;   
 
        }
        header .ofertas td
        {
            vertical-align:top;
            height:70px;
            margin:0;
            padding:0;
        }
        header .loopedSlider
        {
            float:right;
            padding:0 20px 0 0;
            position:relative;
            top:-15px;
            height:165;
            
        }
        header .solapas
        {
            
            width:280px;
            height:0px;
            text-align:right;
            position:absolute;
            z-index:10;
            top:0px;
            margin:0px;
            padding:0 0 0 710px;
        }
 
        header .iso9001
        {
            width:280px;
            height:0;
            text-align:right;
            position:relative;
            z-index:15;
            top:-130px;
            margin:0px;
            left:130px;
            padding:0px 0 0 75px;
            
        }
        header #agenda
        {
            height:65px;
            text-align:left;
            margin:-15px 20px 10px 20px;
            padding:0px;
            overflow:hidden;
            background-color:#DEE1E6;
        }
        header #agenda .tit-mobile
        {
            font-family: "FreesiaUPC", "Arial";
            font-size:19px;
            height:5px;
            padding:0 5px;
            color:#000000;
        }
        header #agenda ul
        {
            height:5px;
        }
        header #agenda ul li
        {
            margin:0;
            padding:0 15px 0 0;
            list-style-type: none;
            display: inline;
 
        }
        
        header #agenda .alink
        {
            color:#20317B;
        }
        header #agenda .alink:hover
        {
            color:#000000;
        }
        header #agenda li a
        {
            font-family: "FreesiaUPC", "Arial";
            color:#000000;
            font-family: "FreesiaUPC", "Arial";
            font-size:22px;
            text-transform:uppercase;
        }
        header .iconos
        {
            text-align:left;
            padding: 0 20px;
        }
        header .iconos table
        {
            width:982px;
        }
}
 

Lo que necesito, es que si el ancho es menor que 421px se vea de una forma, si es mayor, que se vea de otra.
Si me pueden ayudar se los agradeceré mucho!!!

[skat]

Iniciado por lauser

No es muy recomendable... pero si no tienes conocimientos y no puedes contratar a un profesional. Siempre puedes recurrir a: sitio1 o sitio2.

Muchas gracias! y sin recurrir a ese tipo de soluciones, y recordando que esto está sobre dreamweaver y es algo muy pequeño y con una sola hoja de estilos. No tengo otra manera de hacerlo, quiero decir, que creando otra hoja css que me cargue sólo cuando se visualiza desde un móvil, no me serviría? alguna hoja css que me podáis pasar? Tendría que modificar el header o algún archivo para que se cargue esta hoja css en esas condiciones?

gracias

[NueveReinas]

Si usas media-queries no tendrás que cargar ninguna otra hoja de estilos.

Si sigues pensando en crear un CSS para cada dispositivo, lee esto: http://www.forosdelweb.com/f13/recon...r-css-1044885/

[lauser]

Iniciado por skat

Muchas gracias! y sin recurrir a ese tipo de soluciones, y recordando que esto está sobre dreamweaver y es algo muy pequeño y con una sola hoja de estilos. No tengo otra manera de hacerlo, quiero decir, que creando otra hoja css que me cargue sólo cuando se visualiza desde un móvil, no me serviría? alguna hoja css que me podáis pasar? Tendría que modificar el header o algún archivo para que se cargue esta hoja css en esas condiciones?

gracias

No te podemos pasar una hoja css, simplemente por que depende del dideño de cada web. No lo entiendes?. Es como si quieres poner las ruedas de un coche en un camión, son diferentes.