Regresar a la página www.ComoCrearTuWeb.com
Resultados 1 al 5 de 5

Tema: Media queries para un Responsive Design

  1. #1
    Esto empieza a ser un vicio... Habitante Avatar de Doodleo
    Fecha de Ingreso
    25 abr, 11
    Ubicación
    Galicia (España)
    Mensajes
    1,329
    Poder de Reputación
    17

    Media queries para un Responsive Design

    Hola:

    Como todos sabemos, en estos tiempos que corren es casi (por no decir completamente) imprescindible adaptar tu página web a todo los tipos de dispositivos desde los cuales el visitante puede acceder a ella. Es obvio que si un visitante entra en tu página web desde un smartphone o tablet (cosa cada vez más y más frecuente) y ve todo desordenado o es muy incómodo permanecer en la web, "lo hemos perdido".

    Para solucionar esto existen un montón de soluciones para la más efectiva y recomendada es utilizar las media queries de CSS.
    He buscado bastante por internet pero no he encontrado un texto donde listen las media queries básicas, y el objetivo de este post sería reunir unas cuantas para poder añadirlas a nuestra web.

    ¿Cuáles utilizáis para pantallas de escritorio? ¿Y para iPads, tablets, o smartphones?

  2. #2
    Recien Llegado! Habitante
    Fecha de Ingreso
    11 jul, 14
    Ubicación
    Lima
    Mensajes
    23
    Poder de Reputación
    5
    Buena iniciativa.

    Personalmente yo uso las media queries con los siguientes anchos:

    480px -> Smarphone
    680px -> Tablets
    980px -> PCs normales
    1100px -> Laptops o Monitores grandes

    Y en base a ello comienzo a codear css.

    Además recomiendo usar Bootstrap si son principiantes en el responsive design, es un excelente framework css.
    Diseño de Páginas Web Profesionales:
    Hostingroup - Hosting Peru

  3. #3
    Me va gustando esto... Habitante Avatar de CircuitoX
    Fecha de Ingreso
    29 nov, 09
    Mensajes
    66
    Poder de Reputación
    12
    Las medidas que yo utilizo son:

    /* Landscape phones and down */
    @media (max-width: 480px) { ... }

    /* Landscape phone to portrait tablet */
    @media (max-width: 767px) { ... }

    /* Portrait tablet to landscape and desktop */
    @media (min-width: 768px) and (max-width: 979px) { ... }

    /* Large desktop */
    @media (min-width: 1200px) { ... }

    Otra forma para saber es mirar la pagina de bootstrap:

    http://getbootstrap.com/2.3.2/#responsive

    En el navegador web mozilla firefox, tu puedes ver las medidas con las teclas:

    Control + Shirt + M

    En google chrome existe una extension llamado resolution test
    My website responsive, html5, puro css y con Animación css3 web cusco
    Algo Diferente Paginas web Cusco
    Si necesitas ayuda con algo, entonces:
    http://www.google.com/+NestorMinaweb

  4. #4
    Recien Llegado! Merodeador
    Fecha de Ingreso
    22 ago, 17
    Mensajes
    5
    Poder de Reputación
    0
    Lo mismo en Chrome, desde la opcion Inspeccionar, en la pestaña movil (icono de movil en la izquierda), ahi van a encotrar las principales medidas.

  5. #5
    Recien Llegado! Merodeador
    Fecha de Ingreso
    07 sep, 17
    Mensajes
    6
    Poder de Reputación
    0
    depende bastante de la web.

    Yo normalmente uso plantillas ya adaptadas pero las que he adaptado yo porque venían de una versión responsive no tome medidas sino que fui adaptando la web desde la versión más extensa a la más pequeña para móviles y iba generando los cortes en las media querys cuando se empezaba a ver mal.

Temas Similares

  1. Diseño responsivo (Responsive deign)
    Por Pedro-vk en el foro Adaptar o Crear una web para móviles
    Respuestas: 12
    Último Mensaje: 05/02/2016, 12:44
  2. Problema con Zoom de smartphones en página hecha con responsive design
    Por gussiglo21 en el foro Adaptar o Crear una web para móviles
    Respuestas: 5
    Último Mensaje: 22/12/2015, 21:04
  3. ayuda con Videos para Windows Media Player
    Por splaing en el foro Foro General
    Respuestas: 3
    Último Mensaje: 27/08/2008, 18:58

Permisos de Publicación

  • No puedes crear nuevos temas
  • No puedes responder temas
  • No puedes subir archivos adjuntos
  • No puedes editar tus mensajes
  •