{"id":1449,"date":"2024-08-02T06:34:04","date_gmt":"2024-08-02T04:34:04","guid":{"rendered":"https:\/\/blog.sutilweb.eu\/?page_id=1449"},"modified":"2024-08-02T06:34:05","modified_gmt":"2024-08-02T04:34:05","slug":"22-media-queries-css","status":"publish","type":"page","link":"https:\/\/sutilweb.eu\/index.php\/lenguajes\/css3\/css3-avanzado\/22-media-queries-css\/","title":{"rendered":"22. Media Queries CSS"},"content":{"rendered":"\n

Tipos de medios introducidos en CSS2<\/h2>\n\n\n\n

La regla @media<\/em><\/strong>, introducida en CSS2<\/strong>, hizo posible definir diferentes reglas de estilo para diferentes tipos de medios. Ejemplos: puedes tener un conjunto de reglas de estilo para pantallas de computadora, uno para impresoras, uno para dispositivos de mano, uno para dispositivos de tipo televisi\u00f3n, etc.<\/p>\n\n\n\n\n\n\n\n

Desafortunadamente, estos tipos de medios nunca recibieron mucho apoyo de los dispositivos, aparte del tipo de medios impresos.<\/p>\n\n\n\n

CSS3 introdujo Media Queries<\/h2>\n\n\n\n

Las consultas de medios<\/strong> (Media Queries<\/strong>) en CSS3<\/strong> ampliaron la idea de los tipos de medios de CSS2<\/strong>: en lugar de buscar un tipo de dispositivo, analizan la capacidad del dispositivo.<\/p>\n\n\n\n

Las Media Queries<\/strong> se pueden usar para verificar muchas cosas, como:<\/p>\n\n\n\n

    \n
  • ancho y alto de la ventana gr\u00e1fica<\/li>\n\n\n\n
  • ancho y alto del dispositivo<\/li>\n\n\n\n
  • orientaci\u00f3n (\u00bfla tableta\/tel\u00e9fono est\u00e1 en modo horizontal o vertical?)<\/li>\n\n\n\n
  • resoluci\u00f3n<\/li>\n<\/ul>\n\n\n\n

    El uso de Media Queries<\/strong> es una t\u00e9cnica popular para entregar una hoja de estilo personalizada a equipos de escritorio, port\u00e1tiles, tabletas y tel\u00e9fonos m\u00f3viles (como tel\u00e9fonos iPhone y Android).<\/p>\n\n\n\n

    Sintaxis<\/h2>\n\n\n\n

    Una Media Query<\/strong> consta de un tipo de medio y puede contener una o m\u00e1s expresiones, que se resuelven en verdadero o falso.<\/p>\n\n\n\n

    @media not|only mediatype <\/em>and(expressions<\/em>) {\n  CSS-Code;\n<\/em>}<\/pre>\n\n\n\n
    El resultado de la consulta es verdadero si el tipo de medio especificado coincide con el tipo de dispositivo en el que se muestra el documento y todas las expresiones de la consulta de medios son verdaderas. Cuando una Media Query<\/strong> es verdadera, se aplican la hoja de estilo o las reglas de estilo correspondientes, siguiendo las reglas en cascada normales. A menos que utilice los operadores not<\/em> <\/strong>o only<\/em><\/strong>, el tipo de medio es opcional y el tipo all<\/em> <\/strong>estar\u00e1 impl\u00edcito. Tambi\u00e9n puedes tener diferentes hojas de estilo para diferentes medios:<\/p>\n\n\n\n
    <link rel=\"stylesheet\" media=\"mediatype<\/em> and|not|only (expressions<\/em>)\" href=\"print.css<\/em>\"><\/pre>\n\n\n\n
    Tipos<\/h2>\n\n\n\n
    Valor<\/th>Descripci\u00f3n<\/th><\/tr>
    all<\/em><\/strong><\/td>Se utiliza para todos los dispositivos de tipo de medios<\/td><\/tr>
    print<\/em><\/strong><\/td>Usado para impresoras<\/td><\/tr>
    screen<\/em><\/strong><\/td>Se utiliza para pantallas de computadora, tabletas, tel\u00e9fonos inteligentes, etc.<\/td><\/tr>
    speech<\/em><\/strong><\/td>Se utiliza para lectores de pantalla que \u00ableen\u00bb la p\u00e1gina en voz alta<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
    Ejm sencillo<\/h2>\n\n\n\n
    Una forma de usar consultas de medios es tener una secci\u00f3n CSS alternativa dentro de tu hoja de estilo. El siguiente ejemplo cambia el color de fondo a verde claro si la ventana gr\u00e1fica tiene 480 p\u00edxeles de ancho o m\u00e1s (si la ventana gr\u00e1fica tiene menos de 480 p\u00edxeles, el color de fondo ser\u00e1 rosa).<\/p>\n\n\n\n
    Ejm<\/strong><\/p>\n\n\n\n
    <!DOCTYPE html>
    <html>
      <head>
        <style>
          body {
            background-color: pink;
          }

          @media screen and (min-width: 480px) {
            body {
              background-color: lightgreen;
            }
          }
        <\/style>
      <\/head>
      <body>
        <h1>Resize the browser window to see the effect!<\/h1>
        <p>
          The media query will only apply if the media type is screen and the
          viewport is 480px wide or wider.
        <\/p>
      <\/body>
    <\/html><\/pre>\n\n\n\n
    El siguiente ejemplo muestra un men\u00fa que flotar\u00e1 a la izquierda de la p\u00e1gina si la ventana gr\u00e1fica tiene 480 p\u00edxeles de ancho o m\u00e1s (si la ventana gr\u00e1fica tiene menos de 480 p\u00edxeles, el men\u00fa estar\u00e1 encima del contenido):<\/p>\n\n\n\n
    Ejm<\/strong><\/p>\n\n\n\n
    <!DOCTYPE html>
    <html>
      <head>
        <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \/>
        <style>
          .wrapper {
            overflow: auto;
          }

          #main {
            margin-left: 4px;
          }

          #leftsidebar {
            float: none;
            width: auto;
          }

          #menulist {
            margin: 0;
            padding: 0;
          }

          .menuitem {
            background: #cdf0f6;
            border: 1px solid #d4d4d4;
            border-radius: 4px;
            list-style-type: none;
            margin: 4px;
            padding: 2px;
          }

          @media screen and (min-width: 480px) {
            #leftsidebar {
              width: 200px;
              float: left;
            }
            #main {
              margin-left: 216px;
            }
          }
        <\/style>
      <\/head>
      <body>
        <div class=\"wrapper\">
          <div id=\"leftsidebar\">
            <ul id=\"menulist\">
              <li class=\"menuitem\">Menu-item 1<\/li>
              <li class=\"menuitem\">Menu-item 2<\/li>
              <li class=\"menuitem\">Menu-item 3<\/li>
              <li class=\"menuitem\">Menu-item 4<\/li>
              <li class=\"menuitem\">Menu-item 5<\/li>
            <\/ul>
          <\/div>

          <div id=\"main\">
            <h1>Resize the browser window to see the effect!<\/h1>
            <p>
              This example shows a menu that will float to the left of the page if
              the viewport is 480 pixels wide or wider. If the viewport is less than
              480 pixels, the menu will be on top of the content.
            <\/p>
          <\/div>
        <\/div>
      <\/body>
    <\/html><\/pre>\n\n\n\n
    Media Queries para men\u00fas<\/h2>\n\n\n\n
    En este ejemplo, usamos Media Queries para crear un men\u00fa de navegaci\u00f3n Responsive<\/strong>, que var\u00eda en dise\u00f1o en diferentes tama\u00f1os de pantalla.<\/p>\n\n\n\n
    Ejm<\/strong><\/p>\n\n\n\n
    <!DOCTYPE html>
    <html lang=\"es\">
      <head>
        <meta charset=\"UTF-8\" \/>
        <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" \/>
        <style>
          * {
            box-sizing: border-box;
          }

          .topnav {
            overflow: hidden;
            background-color: #333;
          }

          .topnav a {
            float: left;
            display: block;
            color: #f2f2f2;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
          }

          .topnav a:hover {
            background-color: #ddd;
            color: black;
          }

          @media screen and (max-width: 600px) {
            .topnav a {
              float: none;
              width: 100%;
            }
          }
        <\/style>
      <\/head>
      <body>
        <h2>Men\u00fa de navegaci\u00f3n Responsive<\/h2>
        <p>
          Cambia el tama\u00f1o de la ventana del navegador para ver el efecto: cuando la
          pantalla tiene menos de 600 px, el men\u00fa de navegaci\u00f3n se mostrar\u00e1
          verticalmente en lugar de horizontalmente.
        <\/p>
        <div class=\"topnav\">
          <a href=\"#\">Link 1<\/a>
          <a href=\"#\">Link 2<\/a>
          <a href=\"#\">Link 3<\/a>
        <\/div>
      <\/body>
    <\/html><\/pre>\n\n\n\n
    Media Queries para columnas<\/h2>\n\n\n\n
    Un uso com\u00fan de las consultas de medios<\/strong> (Media Queries<\/strong>) es crear un dise\u00f1o flexible. En este ejemplo, creamos un dise\u00f1o que var\u00eda entre cuatro, dos y columnas de ancho completo, seg\u00fan los diferentes tama\u00f1os de pantalla.<\/p>\n\n\n\n
    Ejm<\/strong><\/p>\n\n\n\n
    <!DOCTYPE html>
    <html>
      <head>
        <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" \/>
        <style>
          * {
            box-sizing: border-box;
          }

          \/* Create four equal columns that floats next to each other *\/
          .column {
            float: left;
            width: 25%;
            padding: 20px;
          }

          \/* Clear floats after the columns *\/
          .row:after {
            content: \"\";
            display: table;
            clear: both;
          }

          \/* On screens that are 992px wide or less, go from four columns to two columns *\/
          @media screen and (max-width: 992px) {
            .column {
              width: 50%;
            }
          }

          \/* On screens that are 600px wide or less, make the columns stack on top of 
    each other instead of next to each other *\/
          @media screen and (max-width: 600px) {
            .column {
              width: 100%;
            }
          }
        <\/style>
      <\/head>
      <body>
        <h2>Responsive Four Column Layout<\/h2>
        <p>
          <strong>Resize the browser window to see the responsive effect.<\/strong>
          On screens that are 992px wide or less, the columns will resize from four
          columns to two columns. On screens that are 600px wide or less, the
          columns will stack on top of each other instead of next to eachother.
        <\/p>

        <div class=\"row\">
          <div class=\"column\" style=\"background-color: #aaa\">
            <h2>Column 1<\/h2>
            <p>Some text..<\/p>
          <\/div>

          <div class=\"column\" style=\"background-color: #bbb\">
            <h2>Column 2<\/h2>
            <p>Some text..<\/p>
          <\/div>

          <div class=\"column\" style=\"background-color: #ccc\">
            <h2>Column 3<\/h2>
            <p>Some text..<\/p>
          <\/div>

          <div class=\"column\" style=\"background-color: #ddd\">
            <h2>Column 4<\/h2>
            <p>Some text..<\/p>
          <\/div>
        <\/div>
      <\/body>
    <\/html><\/pre>\n\n\n\n
    Website flexible<\/h2>\n\n\n\n
    En este ejemplo, usamos consultas de medios junto con flexbox<\/em> <\/strong>para crear un sitio web Responsive, que contiene una barra de navegaci\u00f3n flexible y contenido flexible.<\/p>\n\n\n\n
    Ejm<\/strong><\/p>\n\n\n\n
    <!DOCTYPE html>
    <html lang=\"es\">
      <head>
        <title>Ejm de p\u00e1gina completa<\/title>
        <meta charset=\"UTF-8\" \/>
        <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" \/>
        <style>
          * {
            box-sizing: border-box;
          }

          body {
            font-family: arial;
            margin: 0;
          }

          .header {
            padding: 60px;
            text-align: center;
            background: #1abc9c;
            color: white;
          }

          .navbar {
            display: flex;
            background-color: #333;
          }

          .navbar a {
            color: white;
            padding: 14px 20px;
            text-decoration: none;
            text-align: center;
          }

          .navbar a:hover {
            background-color: #ddd;
            color: black;
          }

          .row {
            display: flex;
            flex-wrap: wrap;
          }

          .side {
            flex: 30%;
            background-color: #f1f1f1;
            padding: 20px;
          }

          .main {
            flex: 70%;
            background-color: white;
            padding: 20px;
          }

          .fakeimg {
            background-color: #aaa;
            width: 100%;
            padding: 20px;
          }

          .footer {
            padding: 20px;
            text-align: center;
            background-color: #ddd;
          }

          @media screen and (max-width: 700px) {
            .row,
            .navbar {
              flex-direction: column;
            }
          }
        <\/style>
      <\/head>
      <body>
        <!-- NOTA -->
        <div style=\"background-color: yellow; padding: 5px\">
          <h4 style=\"text-align: center\">
            Cambia el tama\u00f1o del navegador para ver el efecto
          <\/h4>
        <\/div>

        <!-- HEADER -->
        <div class=\"header\">
          <h1>Mi web<\/h1>
          <p>Con un <b>Dise\u00f1o flexible<\/b><\/p>
        <\/div>

        <!-- MEN\u00da DE NAVEGACI\u00d3N -->
        <div class=\"navbar\">
          <a href=\"#\">Link 1<\/a>
          <a href=\"#\">Link 2<\/a>
          <a href=\"#\">Link 3<\/a>
          <a href=\"#\">Link 4<\/a>
        <\/div>

        <!-- CONTENIDO FLEXIBLE -->
        <div class=\"row\">
          <div class=\"side\">
            <h2>Sobre m\u00ed<\/h2>
            <h5>Foto de m\u00ed<\/h5>
            <div class=\"fakeimg\" style=\"height: 200px\">Img<\/div>
            <p>Algo de texto<\/p>
            <h3>Mas texto<\/h3>
            <p>Algo m\u00e1s de texto<\/p>
            <div class=\"fakeimg\" style=\"height: 60px\">Img<\/div>
            <div class=\"fakeimg\" style=\"height: 60px\">Img<\/div>
            <div class=\"fakeimg\" style=\"height: 60px\">Img<\/div>
          <\/div>
          <div class=\"main\">
            <h2>T\u00edtulo principal<\/h2>
            <h5>Descripci\u00f3n con fecha 18\/07\/2022<\/h5>
            <div class=\"fakeimg\" style=\"height: 200px\">Img<\/div>
            <p>Algo de texto<\/p>
            <p>Algo mucho m\u00e1s de texto<\/p>

            <h2>T\u00edtulo principal<\/h2>
            <h5>Descripci\u00f3n con fecha 15\/07\/2022<\/h5>
            <div class=\"fakeimg\" style=\"height: 200px\">Img<\/div>
            <p>Algo de texto<\/p>
            <p>Algo mucho m\u00e1s de texto<\/p>
          <\/div>
        <\/div>

        <!-- FOOTER -->
        <div class=\"footer\">
          <h2>Footer<\/h2>
        <\/div>
      <\/body>
    <\/html><\/pre>\n\n\n\n
    Min Width y Max Width<\/h2>\n\n\n\n
    Tambi\u00e9n puedes usar los valores (max-width:<\/em><\/strong> ..) y (min-width:<\/em><\/strong> ..) para establecer un ancho m\u00ednimo y un ancho m\u00e1ximo. Por ejemplo, cuando el ancho del navegador est\u00e1 entre 600 y 900 px, cambie la apariencia de un elemento <div><\/em><\/strong>.<\/p>\n\n\n\n
    Ejm<\/strong><\/p>\n\n\n\n
    <!DOCTYPE html>
    <html>
      <head>
        <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" \/>
        <style>
          @media screen and (max-width: 900px) and (min-width: 600px) {
            div.example {
              font-size: 50px;
              padding: 50px;
              border: 8px solid black;
              background: yellow;
            }
          }
        <\/style>
      <\/head>
      <body>
        <h2>Change the appearance of DIV on different screen sizes<\/h2>

        <div class=\"example\">Example DIV.<\/div>

        <p>
          When the browser's width is between 600 and 900px, change the appearance
          of DIV. <strong>Resize the browser window to see the effect<\/strong>.
        <\/p>
      <\/body>
    <\/html><\/pre>\n","protected":false},"excerpt":{"rendered":"
    Tipos de medios introducidos en CSS2 La regla @media, introducida en CSS2, hizo posible definir diferentes reglas de estilo para […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":1367,"menu_order":21,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-1449","page","type-page","status-publish","hentry"],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false},"uagb_author_info":{"display_name":"Sutil Web","author_link":"https:\/\/sutilweb.eu\/index.php\/author\/sutilweb\/"},"uagb_comment_info":0,"uagb_excerpt":"Tipos de medios introducidos en CSS2 La regla @media, introducida en CSS2, hizo posible definir diferentes reglas de estilo para […]","_links":{"self":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1449","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/comments?post=1449"}],"version-history":[{"count":3,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1449\/revisions"}],"predecessor-version":[{"id":1452,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1449\/revisions\/1452"}],"up":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1367"}],"wp:attachment":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/media?parent=1449"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}