Saltar al contenido

cómo agregar media querry en ejemplo de código html

Te damos la bienvenida a nuestra web, aquí vas a encontrar la solucíon a lo que necesitas.

Ejemplo 1: consultas de medios css

@mediaonly screen and(max-width:1200px)/*Tablets [601px -> 1200px]*/@mediaonly screen and(max-width:600px)/*Big smartphones [426px -> 600px]*/@mediaonly screen and(max-width:425px)/*Small smartphones [325px -> 425px]*/

Ejemplo 2: consultas de medios css

/* (320x480) iPhone (Original, 3G, 3GS) */@mediaonly screen and(min-device-width:320px)and(max-device-width:480px)/* insert styles here *//* (320x480) Smartphone, Portrait */@mediaonly screen and(device-width:320px)and(orientation: portrait)/* insert styles here *//* (320x480) Smartphone, Landscape */@mediaonly screen and(device-width:480px)and(orientation: landscape)/* insert styles here *//* (480x800) Android */@mediaonly screen and(min-device-width:480px)and(max-device-width:800px)/* insert styles here *//* (640x960) iPhone 4 & 4S */@mediaonly screen and(min-device-width:640px)and(max-device-width:960px)/* insert styles here *//* (720x1280) Galaxy Nexus, WXGA */@mediaonly screen and(min-device-width:720px)and(max-device-width:1280px)/* insert styles here *//* (720x1280) Galaxy Nexus, Landscape */@mediaonly screen and(min-device-width:720px)and(max-device-width:1280px)and(orientation: landscape)/* insert styles here *//* (1024x768) iPad 1 & 2, XGA */@mediaonly screen and(min-device-width:768px)and(max-device-width:1024px)/* insert styles here *//* (768x1024) iPad 1 & 2, Portrait */@mediaonly screen and(min-device-width:768px)and(max-device-width:1024px)and(orientation: portrait)/* insert styles here *//* (1024x768) iPad 1 & 2, Landscape */@mediaonly screen and(min-device-width:768px)and(max-device-width:1024px)and(orientation: landscape)/* insert styles here *//* (2048x1536) iPad 3 */@mediaonly screen and(min-device-width:1536px)and(max-device-width:2048px)/* insert styles here *//* (1280x720) Galaxy Note 2, WXGA */@mediaonly screen and(min-device-width:720px)and(max-device-width:1280px)/* insert styles here *//* (1366x768) WXGA Display */@media  screen and(max-width:1366px)/* insert styles here *//* (1280x1024) SXGA Display */@media  screen and(max-width:1280px)/* insert styles here *//* (1440x900) WXGA+ Display */@media  screen and(max-width:1440px)/* insert styles here *//* (1680x1050) WSXGA+ Display */@media  screen and(max-width:1680px)/* insert styles here *//* (1920x1080) Full HD Display */@media  screen and(max-width:1920px)/* insert styles here *//* (1600x900) HD+ Display */@media  screen and(max-width:1600px)/* insert styles here */

Si crees que ha sido de provecho este post, sería de mucha ayuda si lo compartes con el resto desarrolladores y nos ayudes a extender nuestra información.

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *