Media Query Simulator - DreamTech AI

Test your responsive designs with our Media Query Simulator. Input your HTML and CSS, choose device sizes, and see how your styles adapt in real-time.

Controls

HTML Code:

<h1>Media Query Test</h1>
<p>This is a test paragraph to demonstrate the applied styles.</p>
<div class="responsive-element">This element will change based on screen size.</div>

CSS Code:

/* Default styles */
body {
  background-color: #f0f0f0;
  color: #333;
  font-family: Arial, sans-serif;
}

.responsive-element {
  padding: 20px;
  margin-top: 20px;
  border: 2px solid #333;
}

/* Mobile devices */
@media screen and (max-width: 767px) {
  body {
    background-color: #ffe0e0;
    color: #660000;
  }
  .responsive-element {
    background-color: #ffcccc;
  }
}

/* Tablets */
@media screen and (min-width: 768px) and (max-width: 1023px) {
  body {
    background-color: #e0ffe0;
    color: #006600;
  }
  .responsive-element {
    background-color: #ccffcc;
  }
}

/* Laptops and Desktops */
@media screen and (min-width: 1024px) {
  body {
    background-color: #e0e0ff;
    color: #000066;
  }
  .responsive-element {
    background-color: #ccccff;
  }
}

Preview

Applied Media Query:

Applied Styles:

@supports Tester

Test browser support for CSS features using @supports.

@supports (display: flex) {
  body {
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

Simulate Support: