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

Ahora vamos a cambiar los valores de variables en consultas de medios (media query<\/strong>). Aqu\u00ed, primero declaramos una nueva variable local llamada —fontsize<\/em> <\/strong>para la clase .container<\/em><\/strong>. Establecemos su valor en 25 p\u00edxeles. Luego lo usamos en la clase .container<\/em> <\/strong>m\u00e1s abajo. Luego, creamos una regla @media<\/em> <\/strong>que dice \u00abCuando el ancho del navegador es de 450 px o m\u00e1s, cambie el valor de la variable —fontsize<\/em> <\/strong>de la clase .container<\/em> <\/strong>a 50 px\u00bb.<\/p>\n\n\n\n\n\n\n\n

Ejm<\/p>\n\n\n\n

<!DOCTYPE html>
<html>
  <head>
    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" \/>
    <style>
      \/* Variable declarations *\/
      :root {
        --blue: #1e90ff;
        --white: #ffffff;
      }

      .container {
        --fontsize: 25px;
      }

      \/* Styles *\/
      body {
        background-color: var(--blue);
      }

      h2 {
        border-bottom: 2px solid var(--blue);
      }

      .container {
        color: var(--blue);
        background-color: var(--white);
        padding: 15px;
        font-size: var(--fontsize);
      }

      @media screen and (min-width: 450px) {
        .container {
          --fontsize: 50px;
        }
      }
    <\/style>
  <\/head>
  <body>
    <h1>Using Variables in Media Queries<\/h1>

    <div class=\"container\">
      <h2>Lorem Ipsum<\/h2>
      <p>
        When the browser's width is less than 450px, the font-size of this div
        is 25px. When it is 450px or wider, set the --fontsize variable value to
        50px. Resize the browser window to see the effect.
      <\/p>
    <\/div>
  <\/body>
<\/html><\/pre>\n\n\n\n
Aqu\u00ed hay otro ejemplo donde tambi\u00e9n cambiamos el valor de la variable –blue en la regla @media<\/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>
      \/* Variable declarations *\/
      :root {
        --blue: #1e90ff;
        --white: #ffffff;
      }

      .container {
        --fontsize: 25px;
      }

      \/* Styles *\/
      body {
        background-color: var(--blue);
      }

      h2 {
        border-bottom: 2px solid var(--blue);
      }

      .container {
        color: var(--blue);
        background-color: var(--white);
        padding: 15px;
        font-size: var(--fontsize);
      }

      @media screen and (min-width: 450px) {
        .container {
          --fontsize: 50px;
        }
        :root {
          --blue: lightblue;
        }
      }
    <\/style>
  <\/head>
  <body>
    <h1>Using Variables in Media Queries<\/h1>

    <div class=\"container\">
      <h2>Lorem Ipsum<\/h2>
      <p>
        When the browser's width is 450px or wider, set the --fontsize variable
        value to 50px and the --blue variable value to lightblue. Resize the
        browser window to see the effect.
      <\/p>
    <\/div>
  <\/body>
<\/html><\/pre>\n","protected":false},"excerpt":{"rendered":"
Ahora vamos a cambiar los valores de variables en consultas de medios (media query). Aqu\u00ed, primero declaramos una nueva variable local llamada —fontsize para la clase .container. Establecemos su valor en 25 p\u00edxeles. Luego lo usamos en la clase .container m\u00e1s abajo. Luego, creamos una regla @media que dice \u00abCuando el ancho del navegador es […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":1367,"menu_order":19,"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-1443","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":"Ahora vamos a cambiar los valores de variables en consultas de medios (media query). Aqu\u00ed, primero declaramos una nueva variable local llamada —fontsize para la clase .container. Establecemos su valor en 25 p\u00edxeles. Luego lo usamos en la clase .container m\u00e1s abajo. Luego, creamos una regla @media que dice \u00abCuando el ancho del navegador es…","_links":{"self":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1443","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=1443"}],"version-history":[{"count":2,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1443\/revisions"}],"predecessor-version":[{"id":1445,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1443\/revisions\/1445"}],"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=1443"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}