如何根据分辨率为col-lg-3设置不同尺寸？

Hey there! You’re already on the right track here—CSS media queries are the go-to method for applying different styles based on screen resolution. Your example code is a solid starting point, so let’s break it down and add some context to make it even more effective.

Your Current Approach Explained #

You’ve set base styles for .col-lg-3 that apply to screens meeting Bootstrap’s lg breakpoint (992px wide by default, which includes 1366x768), then added a media query to override those styles for larger 1920x1080+ screens. Here’s your code formatted cleanly:

/* Base styles for .col-lg-3 (applies to screens ≥992px, including 1366x768) */
.col-lg-3 {
  width: 25%; /* Default Bootstrap width, adjust as needed */
  /* Add other styles like padding, margin, or font size here */
}

/* Override styles for screens ≥1920px wide AND ≥1080px tall */
@media screen and (min-width: 1920px) and (min-height: 1080px) {
  .col-lg-3 {
    width: 20%; /* Example: Make columns narrower on large screens */
    /* Adjust additional styles like spacing or element sizing here */
  }
}

Extra Tips for Smoother Responsiveness #

• Target more resolutions: If you need to support other sizes (like 2560x1440), just add another media query with the corresponding min-width and min-height values.
• Use relative units: Instead of fixed pixel values, try percentages, rem, or vw (viewport width) for widths, padding, or fonts—this makes elements scale more naturally across screens.
• Pinpoint exact resolutions: If you want styles to apply only to 1366x768 (and not larger screens below 1920px), add a max-width condition to narrow it down:

  @media screen and (min-width: 1366px) and (max-width: 1919px) and (min-height: 768px) {
    .col-lg-3 {
      /* Styles exclusive to 1366x768 screens */
    }
  }
  

This setup lets you fine-tune your .col-lg elements to look polished on every screen size you need to support.

内容的提问来源于stack exchange，提问作者Rafael Augusto