How to apply CSS for screens from one size to another?

To apply CSS for screens of varying sizes, you primarily utilize media queries. These allow you to set different styles based on the characteristics of the device, most commonly the viewport width.

Here’s how you can implement responsive CSS using media queries:

1. Understanding Media Queries:

- Media queries use the @media rule, followed by a media type and optional media features within parentheses.

- The syntax generally looks like: @media (feature: value) { / CSS Rules / }

2. Common Media Features:

- min-width: Applies styles when the viewport width is equal to or greater than the specified value.

- max-width: Applies styles when the viewport width is equal to or less than the specified value.

- min-height and max-height: Similar to width, but for the viewport height.

- You can combine features using and, or, and not operators.

3. Basic Example Using max-width:

/ Default styles for larger screens /
body {
  font-size: 16px;
  background-color: #fff;
}

@media (max-width: 768px) {
  / Styles for screens smaller than 768px /
  body {
    font-size: 14px;
    background-color: #f0f0f0;
  }
}

@media (max-width: 480px) {
  / Styles for screens smaller than 480px /
  body {
    font-size: 12px;
    background-color: #e0e0e0;
  }
}

4. Mobile First Approach:

- Start by creating styles for mobile devices (smaller screens) and use min-width media queries to progressively enhance the design for larger screens.

- This makes your CSS more manageable because you only add or change styles as screen sizes grow.

5. Breakpoints:

- Breakpoints are the screen sizes where you adjust your CSS. Common breakpoints include 480px (mobile), 768px (tablet), 992px (small desktop), and 1200px (large desktop), but they should be tailored to your design.

6. Example using min-width (Mobile First):

/ Default Mobile Styles /
.container {
  width: 100%;
  padding: 10px;
}

@media (min-width: 768px) {
  / Styles for Tablet and Larger /
  .container {
    width: 750px;
    padding: 20px;
  }
}

@media (min-width: 992px) {
  / Styles for Desktop and Larger /
  .container {
    width: 970px;
    padding: 30px;
  }
}

7. Testing:

- Always test your responsive styles on actual devices or by resizing the browser window to mimic different screen sizes. Use browser developer tools to toggle between device simulations.

By using these techniques, you can effectively target different screen sizes and create a website that provides an optimal viewing experience across various devices.

Learn more about this