SHARE
TWEET

Código para teste (debbug) das Media Queries – Design Respon

pixwell Feb 10th, 2014 124 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!doctype html>
  2.  
  3. <!--
  4. AUTOR: PiXwell Web Design
  5. SITE: http://pixwell.com.br
  6. Veja o Post completo aqui: http://bit.ly/1covjrW
  7. -->
  8.  
  9. <html lang="pt">
  10. <head>
  11.         <meta charset="UTF-8" />
  12.         <title>Document</title>
  13.  
  14.         <style type="text/css">
  15.         @media(max-width:480px){
  16.         .mobile{background: green}
  17.  
  18.         .tablet{
  19.             display: none !important;
  20.             visibility: hidden !important
  21.         }
  22.         .desktop{
  23.             display: none !important;
  24.             visibility: hidden !important
  25.         }
  26.  
  27.     }
  28.  
  29.     @media(min-width:481px) and (max-width:600px){
  30.         .mobile {
  31.             display: none !important;
  32.             visibility: hidden !important
  33.         }
  34.         .tablet{
  35.             background: blue;
  36.             color: #FFF
  37.         }
  38.         .desktop{
  39.             display: none !important;
  40.             visibility: hidden !important
  41.         }
  42.  
  43.     }
  44.  
  45.     @media(min-width:601px){
  46.         .mobile {
  47.             display: none !important;
  48.             visibility: hidden !important
  49.         }
  50.         .tablet{
  51.             display: none !important;
  52.             visibility: hidden !important
  53.         }
  54.         .desktop{
  55.             background: red;
  56.             color: #FFF
  57.         }
  58.     }
  59.  
  60.     *{margin: 0; padding: 0}
  61.     h2{font-size: 16em}
  62.     h3{font-size: 10em}
  63.  
  64.         </style>
  65. </head>
  66. <body>
  67.     <div class="mobile">
  68.         <h2>Mobile</h2>
  69.         <h3>Resolução 1</h3>
  70.     </div>
  71.     <div class="tablet">
  72.         <h2>Tablet</h2>
  73.         <h3>Resolução 2</h3>
  74.     </div>
  75.     <div class="desktop">
  76.         <h2>Desktop</h2>
  77.         <h3>Resolução 3</h3>
  78.     </div>
  79.  
  80. </body>
  81. </html>
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top