Bộ css set up cho repository các kích thước màn hình

Dưới đây là một bộ CSS để thiết lập các giá trị kích thước cho các màn hình khác nhau trong repository của bạn. Bạn có thể thay đổi các giá trị tùy theo nhu cầu của mình.

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
  /* CSS code here */
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
  /* CSS code here */
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
  /* CSS code here */
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
  /* CSS code here */
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
  /* CSS code here */
}

Lưu ý rằng bộ CSS trên sẽ chỉ được áp dụng nếu bạn đã sử dụng các thẻ đóng và mở phù hợp cho các điều kiện màn hình, ví dụ:

<div class="extra-small-devices"> ... </div>
<div class="small-devices"> ... </div>
<div class="medium-devices"> ... </div>
<div class="large-devices"> ... </div>
<div class="extra-large-devices"> ... </div>

Sau đó, bạn có thể sử dụng CSS để thiết lập kích thước của các thẻ này.