1. Con una cuenta podrás:

    • Publicar preguntas y pedir ayuda
    • Crear tutoriales
    • Acceder a contenido privado
    • Convertirte en un Héroe de la web
    Cerrar notificación
  2. Eres nuevo en la comunidad y necesitas ayuda?
    Sigue estos pasos y recomendaciones antes de publicar tu duda:
    Cerrar notificación

Cómo hacer tu web totalmente Responsive

Tema en 'HTML y CSS' comenzado por Andy s perez, 12 de Agosto de 2017.

  1. Andy s perez

    Andy s perez Nuevo Miembro

    Se incorporó:
    6 de Agosto de 2017
    Mensajes:
    11
    Me gusta recibidos:
    3
    Puntos de trofeos:
    3
    Género:
    Hombre
    Aquí le dejo este codigo solo tiene que extra El css

    /* Smartphones (horizontal) ----------- */ @media only screen and (min-width : 321px) { /* AQUÍ ESCRIBES LOS ESTILOS CSS */ } /* Smartphones (vertical) ----------- */
    @media only screen and (max-width : 320px) { /* AQUÍ ESCRIBES LOS ESTILOS CSS */ } /* iPads (horizontal) ----------- */ @media only screen and (min-width : 768px) and (max-width : 1024px) and (orientation : landscape) { /* AQUÍ ESCRIBES LOS ESTILOS CSS */ } /* iPads (vertical) ----------- */ @media only screen and (min-width : 768px) and (max-width : 1024px) and (orientation : portrait) { /* AQUÍ ESCRIBES LOS ESTILOS CSS */ } /********** iPad 3 **********/ @media only screen and (min-width : 768px) and (max-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) { /* AQUÍ ESCRIBES LOS ESTILOS CSS */ } @media only screen and (min-width : 768px) and (max-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) { /* AQUÍ ESCRIBES LOS ESTILOS CSS */ } /* Ordenadores de escritorio y portátiles ----------- */ @media only screen and (min-width : 1224px) { /* AQUÍ ESCRIBES LOS ESTILOS CSS */ } /* Pantallas grandes ----------- */ @media only screen and (min-width : 1824px) { /* AQUÍ ESCRIBES LOS ESTILOS CSS */ } /* iPhone 4 ----------- */ @media only screen and (min-width : 320px) and (max-width : 480px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) { /* AQUÍ ESCRIBES LOS ESTILOS CSS */ } @media only screen and (min-width : 320px) and (max-width : 480px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) { /* AQUÍ ESCRIBES LOS ESTILOS CSS */ } /* iPhone 5 ----------- */ @media only screen and (min-width: 320px) and (max-height: 568px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){ /* AQUÍ ESCRIBES LOS ESTILOS CSS */ } @media only screen and (min-width: 320px) and (max-height: 568px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){ /* AQUÍ ESCRIBES LOS ESTILOS CSS */ } /* iPhone 6 ----------- */ @media only screen and (min-width: 375px) and (max-height: 667px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){ /* AQUÍ ESCRIBES LOS ESTILOS CSS */ } @media only screen and (min-width: 375px) and (max-height: 667px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){ /* AQUÍ ESCRIBES LOS ESTILOS CSS */ } /* iPhone 6+ ----------- */ @media only screen and (min-width: 414px) and (max-height: 736px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){ /* AQUÍ ESCRIBES LOS ESTILOS CSS */ } @media only screen and (min-width: 414px) and (max-height: 736px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){ /* AQUÍ ESCRIBES LOS ESTILOS CSS */ } /* Samsung Galaxy S3 ----------- */ @media only screen and (min-width: 320px) and (max-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){ /* AQUÍ ESCRIBES LOS ESTILOS CSS */ } @media only screen and (min-width: 320px) and (max-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){ /* AQUÍ ESCRIBES LOS ESTILOS CSS */ } /* Samsung Galaxy S4 ----------- */ @media only screen and (min-width: 320px) and (max-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){ /* AQUÍ ESCRIBES LOS ESTILOS CSS */ } @media only screen and (min-width: 320px) and (max-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){ /* AQUÍ ESCRIBES LOS ESTILOS CSS */ } /* Samsung Galaxy S5 ----------- */ @media only screen and (min-width: 360px) and (max-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){ /* AQUÍ ESCRIBES LOS ESTILOS CSS */ } @media only screen and (min-width: 360px) and (max-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){ /* AQUÍ ESCRIBES LOS ESTILOS CSS */ }




    Enviado desde mi HTCD100LVWPP mediante Tapatalk
     
    A AngelKrak le gusta esto.
  2. AngelKrak

    AngelKrak Héroe de la web

    Se incorporó:
    29 de Abril de 2015
    Mensajes:
    1.428
    Me gusta recibidos:
    652
    Puntos de trofeos:
    113
    Género:
    Hombre
    Ocupación:
    Freelancer
    Localización:
    Guadalajara
    Página web:
    Código (CSS):
    /* Smartphones (horizontal) ----------- */
    @media only screen and (min-width: 321px) {
      /* AQUÍ ESCRIBES LOS ESTILOS CSS */
    } /* Smartphones (vertical) ----------- */
    @media only screen and (max-width: 320px) {
      /* AQUÍ ESCRIBES LOS ESTILOS CSS */
    } /* iPads (horizontal) ----------- */
    @media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
      /* AQUÍ ESCRIBES LOS ESTILOS CSS */
    } /* iPads (vertical) ----------- */
    @media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
      /* AQUÍ ESCRIBES LOS ESTILOS CSS */
    } /********** iPad 3 **********/
    @media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) {
      /* AQUÍ ESCRIBES LOS ESTILOS CSS */
    }
    @media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {
      /* AQUÍ ESCRIBES LOS ESTILOS CSS */
    } /* Ordenadores de escritorio y portátiles ----------- */
    @media only screen and (min-width: 1224px) {
      /* AQUÍ ESCRIBES LOS ESTILOS CSS */
    } /* Pantallas grandes ----------- */
    @media only screen and (min-width: 1824px) {
      /* AQUÍ ESCRIBES LOS ESTILOS CSS */
    } /* iPhone 4 ----------- */
    @media only screen and (min-width: 320px) and (max-width: 480px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) {
      /* AQUÍ ESCRIBES LOS ESTILOS CSS */
    }
    @media only screen and (min-width: 320px) and (max-width: 480px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {
      /* AQUÍ ESCRIBES LOS ESTILOS CSS */
    } /* iPhone 5 ----------- */
    @media only screen and (min-width: 320px) and (max-height: 568px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2) {
      /* AQUÍ ESCRIBES LOS ESTILOS CSS */
    }
    @media only screen and (min-width: 320px) and (max-height: 568px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2) {
      /* AQUÍ ESCRIBES LOS ESTILOS CSS */
    } /* iPhone 6 ----------- */
    @media only screen and (min-width: 375px) and (max-height: 667px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2) {
      /* AQUÍ ESCRIBES LOS ESTILOS CSS */
    }
    @media only screen and (min-width: 375px) and (max-height: 667px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2) {
      /* AQUÍ ESCRIBES LOS ESTILOS CSS */
    } /* iPhone 6+ ----------- */
    @media only screen and (min-width: 414px) and (max-height: 736px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2) {
      /* AQUÍ ESCRIBES LOS ESTILOS CSS */
    }
    @media only screen and (min-width: 414px) and (max-height: 736px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2) {
      /* AQUÍ ESCRIBES LOS ESTILOS CSS */
    } /* Samsung Galaxy S3 ----------- */
    @media only screen and (min-width: 320px) and (max-height: 640px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2) {
      /* AQUÍ ESCRIBES LOS ESTILOS CSS */
    }
    @media only screen and (min-width: 320px) and (max-height: 640px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2) {
      /* AQUÍ ESCRIBES LOS ESTILOS CSS */
    } /* Samsung Galaxy S4 ----------- */
    @media only screen and (min-width: 320px) and (max-height: 640px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 3) {
      /* AQUÍ ESCRIBES LOS ESTILOS CSS */
    }
    @media only screen and (min-width: 320px) and (max-height: 640px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 3) {
      /* AQUÍ ESCRIBES LOS ESTILOS CSS */
    } /* Samsung Galaxy S5 ----------- */
    @media only screen and (min-width: 360px) and (max-height: 640px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 3) {
      /* AQUÍ ESCRIBES LOS ESTILOS CSS */
    }
    @media only screen and (min-width: 360px) and (max-height: 640px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 3) {
      /* AQUÍ ESCRIBES LOS ESTILOS CSS */
    }
    deberias de ponerlo entre las etiquetas css que trae la web para que se vea mejor ;)
     
    A Dawud le gusta esto.
  3. gammafp

    gammafp
    Moderador
    Miembro del Equipo

    Se incorporó:
    12 de Enero de 2015
    Mensajes:
    816
    Me gusta recibidos:
    386
    Puntos de trofeos:
    63
    Género:
    Hombre
    Esfuérzate un poco mas por entregar un mejor post, porque lo que has puesto no se entiende.

    (Aquí le dejo este codigo solo tiene que extra El css) <- ¿eso que quiere decir?

    Pues eso, trata de expresar con mas claridad lo que aportas y si aportas algún código que sea pulcro, lo digo porque si te quieres dedicar al desarrollo tienes que saber expresar mejor tus ideas en los comentarios o a tus compañeros de trabajo.
     
    A Dawud y AngelKrak les gusta esto.
  4. AngelKrak

    AngelKrak Héroe de la web

    Se incorporó:
    29 de Abril de 2015
    Mensajes:
    1.428
    Me gusta recibidos:
    652
    Puntos de trofeos:
    113
    Género:
    Hombre
    Ocupación:
    Freelancer
    Localización:
    Guadalajara
    Página web:
    nose por que y sin ofender pero presiento que apenas se esta enseñando a escribir y leer, ya que todos sus post's que hace son así, casi no se entiendeno_O
     
    A Dawud le gusta esto.
  5. Dawud

    Dawud Miembro conocido

    Se incorporó:
    4 de Abril de 2016
    Mensajes:
    657
    Me gusta recibidos:
    498
    Puntos de trofeos:
    63
    Género:
    Hombre
    Ocupación:
    Estudiante
    Localización:
    Villahermosa, Tabasco
    Igual manera como han mencionado los dos compañeros anteriores, debes de expresar mejor lo que quieres compartir... cuando abrí el post me sorprendió what? :confused::confused: ?? que es eso... hasta que vi que mas abajo que @AngelKrak lo ajusto a un cuadro de css que permite este editor... debes de fijar como compartes tus datos..
     
    A AngelKrak le gusta esto.
  6. Andy s perez

    Andy s perez Nuevo Miembro

    Se incorporó:
    6 de Agosto de 2017
    Mensajes:
    11
    Me gusta recibidos:
    3
    Puntos de trofeos:
    3
    Género:
    Hombre
    Perdón sin escribo así he que tengo un problema en la legua y no mencionó aguna letra como se debe mea cotado mucho ese problema pero estoy mejorado poco a poco pero veo que molesta aló de mas por eso ya no publicaré mas cosa perdo aquien molesto
     
    A AngelKrak y Maddenamy les gusta esto.
  7. Maddenamy

    Maddenamy Miembro conocido

    Se incorporó:
    9 de Enero de 2015
    Mensajes:
    951
    Me gusta recibidos:
    585
    Puntos de trofeos:
    93
    Ocupación:
    Estudiante
    Localización:
    México
    Página web:
    @Andy s perez si te detienen las opiniones de los demás respecto a tu problema no lograrás superarlo.

    Por cierto parece ser un mal entendido (aunque si fueron un poco duros).
     
    A AngelKrak le gusta esto.
  8. gammafp

    gammafp
    Moderador
    Miembro del Equipo

    Se incorporó:
    12 de Enero de 2015
    Mensajes:
    816
    Me gusta recibidos:
    386
    Puntos de trofeos:
    63
    Género:
    Hombre
    Tienes razón en la primera parte de la frase y a lo mejor si fue un mal entendido, pero aún no entiendo que tiene que ver el problema de la lengua con la escritura, son procesos distintos, un mudo puede escribir perfectamente sin saber hablar.
     
    A AngelKrak le gusta esto.
  9. AngelKrak

    AngelKrak Héroe de la web

    Se incorporó:
    29 de Abril de 2015
    Mensajes:
    1.428
    Me gusta recibidos:
    652
    Puntos de trofeos:
    113
    Género:
    Hombre
    Ocupación:
    Freelancer
    Localización:
    Guadalajara
    Página web:
    eso no es tanto el problema, si no que como me dijeron a mi cuando recién empece, puede haber mas gente que lea los tutoriales y no entiendan por el como se escribe y aun peor si los que leen solo saben ingles y poco español, pero no hay que preocuparse por eso, tu puedes seguir publicando sin problemas y pidiendo ayuda, trataremos de entenderte y en todo caso pues preguntaremos sobre algo que no entendamos para que nos expliques lo mejor que puedas ;)
     

Comparte esta página