Ưu tiên thiết bị di động nghĩa là gì

Thuộc phần Thực hành frontend trong hành trình HTML của Coddy. Bài học 6 trên 35.

Ưu tiên thiết bị di động là chiến lược thiết kế trong đó bạn xây dựng website cho thiết bị di động trước, sau đó dần cải thiện để phù hợp với màn hình lớn hơn.
Ý tưởng chính là hiện nay, hầu hết người dùng duyệt web trên điện thoại, vì vậy bắt đầu với màn hình nhỏ giúp website hoạt động tốt với phần lớn khách truy cập.

Bắt đầu bằng cách viết các kiểu cho thiết bị di động:

body {
  font-size: 16px;
  padding: 10px;
}

Sau đó, dùng media query để điều chỉnh thiết kế cho màn hình lớn hơn:

/* Kiểu hiển thị cho thiết bị có chiều rộng lớn hơn 768px */
@media (min-width: 768px) {
  body {
    font-size: 18px;
    padding: 20px;
  }
}

Cách tiếp cận này giúp trang web của bạn hoạt động tốt trên màn hình nhỏ trước, sau đó cải thiện trải nghiệm cho người dùng trên thiết bị lớn hơn.

Thử thách

Dễ

Bạn được cung cấp HTML có một menu điều hướng đơn giản. Nhiệm vụ của bạn là tạo kiểu cho menu bằng cách tiếp cận ưu tiên thiết bị di động.

1. Tạo kiểu cho thiết bị di động trước

Đặt mỗi mục trong menu rộng bằng toàn bộ chiều rộng của vùng chứa, xếp theo chiều dọc.
Đặt các liên kết thành display: block để chúng rộng bằng toàn bộ chiều rộng. Bạn có thể tự chọn các kiểu còn lại như màu sắc, đường viền, v.v. Kết quả có thể trông giống như hình minh họa bên dưới.

2. Tạo kiểu cho màn hình lớn hơn

Truy vấn media dành cho màn hình có min-width: 768px đã được cung cấp.
Bên trong truy vấn này, hãy chuyển bố cục menu sang chiều ngang bằng cách dùng display: flex cho .menu.
Điều chỉnh khoảng cách giữa các mục trong menu sao cho khớp với hình minh họa bên dưới.

Tự làm thử

<!DOCTYPE html>
<html>
<head>
  <title>What “mobile-first” means</title>
  <style>
    /* Write your mobile-first CSS here */
    .menu {
      list-style: none;
      padding: 0;
      margin: 0;
    }
    
    .menu li {
      margin-bottom: 10px;
    }
    
    .menu a {
      
    }
    
    /* Bigger screen styles */
    @media (min-width: 768px) {
      .menu {
       
      }
      
      .menu li {
      
      }
    }
  </style>
</head>
<body>
  <nav>
    <ul class="menu">
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</body>
</html>