5. Dự Án Natours - Responsive Design
5.1. Các chiến thuật trong Responsive Design: Desktop First & Mobile First
- Desktop-First:
- Bắt đầu viết CSS cho màn hình Desktop: màn hình lớn, phổ thông (Laptop, PC ...)
- Sau đó, sử dụng Media Queries để CSS cho các màn hình nhỏ hơn (tablet, Mobile ...)
// Desktop-First
html { font-size: 20px }
@media (max-width: 600px) {
html { font-size: 16px }
}
- Mobile-First: ngược lại so với Desktop-first
html { font-size: 16px }
@media (min-width: 600px) {
html { font-size: 20px }
}
5.2. Max-width & Min-width:
5.3. Breakpoints: Phương án tối ưu
5.3. Ứng dụng SASS trong Responsive Design với Media Queries:
// Old
html {
// This defines what 1rem is
font-size: 62.5%;
}
body {
box-sizing: border-box;
}
@media (max-width: 600px) {
html {
// Css here
}
body {
// Css here
}
}
// New
html {
// This defines what 1rem is
font-size: 62.5%;
@media (max-width: 600px) {
// Css here
}
}
body {
box-sizing: border-box;
@media (max-width: 600px) {
// Css here
}
}
- Với Mixin trong SASS, ta có các cài đặt như sau:
// MEDIA QUERY MANAGER
/*
0 - 600px: Phone
600 - 900px: Tablet portrait
900 - 1200px: Tablet landscape
[1200 - 1800] is where our normal styles apply
1800px + : Big desktop
$breakpoint arguement choices:
- phone
- tab-port
- tab-land
- big-desktop
ORDER: Base + typography > general layout + grid > page layout > components
1em = 16px
*/
@mixin respond($breakpoint) {
@if $breakpoint == phone {
@media only screen and (max-width: 37.5em) { @content }; //600px
}
@if $breakpoint == tab-port {
@media only screen and (max-width: 56.25em) { @content }; //900px
}
@if $breakpoint == tab-land {
@media only screen and (max-width: 75em) { @content }; //1200px
}
@if $breakpoint == big-desktop {
@media only screen and (min-width: 112.5em) { @content }; //1800
}
}
5.4 Advanced Responsive Images
- Responsive images ở level cao hơn, không chỉ là làm cho hình ảnh hiển thị phủ hợp với kích thước màn hình mà còn phải được xử lý để tối ưu tốc độ load trang.
Có 2 cách cở bản để thực hiện Responsive Images trong HTML5 & CSS3, bao gồm:
- Art direction: hiển thị mỗi hình ảnh đã được cắt chỉnh một cách phù hợp cho các kích thước hiển thị, đảm bảo vể cả thẩm mỹ lẫn tộc độ load trang. Cách này được giải quyết qua việc sử dụng thẻ <picture>
- Resolution switching: mang tới cho trình duyệt những tùy chọn với hình ảnh nhỏ hơn cho các thiết bị màn hình khác nhau. Vì trên các màn hình nhỏ thì không cần tới những ảnh có kích thước gốc quá lớn. Bạn cũng có thể phân phối cho trình duyệt các tùy chọn hiển thị hình ảnh với những độ phân giải khác nhau cho các màn hình có mật độ khác nhau. Có thể thực hiện cách này qua các thuộc tính srcset và sizes
Trước khi thực hiện:
- Nếu bạn muốn tối ưu 1 hình ảnh, bạn phải bắt đầu bằng hình ảnh chất lượng cao có định dạng đúng và kích thước phù hợp.
Sử dụng JPG cho ảnh và PNG cho đồ họa hoặc các hình ảnh khác yêu cầu độ trong suốt (đừng làm ngược lại)
Sử dụng PNG-8 thay vì PNG-24 cho đồ họa với số lượng màu giới hạn. Để giảm kích thước hơn nữa, bạn cũng có thể giảm số lượng màu, từ 256 xuống 16.
Sử dụng SVG (hình ảnh đồ họa vector) cho các biểu tượng và biểu tượng. Có thể tăng giảm kích thước của hình ảnh mà không làm tăng kb nào.
Sử dụng inline image dưới 10KB làm chuỗi được mã hóa 64base (ít tốn kém)
Chiều rộng thực tế của hình ảnh không được vượt quá chiều rộng của vùng chứa lớn nhất sẽ được hiển thị, nhân với hai (đối với màn hình Retina).
Phân biệt Hardware và Software pixels:
- ở một số màn hình Retina, kích thước hiển thị chỉ 1440px nhưng độ phân giải lại là 2880x1800, đó là do hệ số mật độ điểm ảnh của chúng là 2. Đây cũng là lý do cùng 1 hình ảnh nhưng khi hiển thị trên điện thoại thường và điện thoại màn hình Retina lại có sự khác biệt.
- Màn hình cũ có mật độ điểm ảnh là 1. Nhưng vì độ phân giải màn hình đã tăng lên trong những năm gần đây, điểm ảnh phần cứng không còn bằng phần mềm hoặc pixel CSS nữa.
- Mối quan hệ giữa phần cứng và pixel CSS được mô tả theo công thức sau: CSS Pixels = Hardware Pixels / Pixel density
Cách thức thực hiện:
Responsive images trong HTML:
Phần tử HTML img cơ bản có thuộc tính src trỏ đến URL hình ảnh: <img src=“image.jpg” alt=“image description”/>
- Nhưng bạn có thể tiến thêm một bước và quyết định hình ảnh nào sẽ phân phối tùy thuộc vào mật độ điểm ảnh của màn hình với thuộc tính srcset:
<img srcset=“image_1x.jpg 1x, image_2x.jpg 2x” src=”image_1x.jpg”/>
- Ngoài mật độ điểm ảnh, ta còn xác định được thông qua kích thước màn hình, bằng đơn vị w, tương đương với CSS pixel. Với hai điểm ngắt (600px và 900px), chúng ta có thể đi với ba kích thước hình ảnh khác nhau:
<img
srcset=“image-sm.jpg 600w,
image-md.jpg 900w,
image-lg.jpg 1440w”
sizes=”50vw”
src=”image_1x.jpg”/>
- Với thuộc tính bổ sung sizes=50vw, bạn đang nói với trình duyệt rằng hình ảnh sẽ được hiển thị ở mức 50vw và dựa trên thông tin này, trình duyệt sẽ quyết định hình ảnh nào sẽ hiển thị.
2. Responsive images trong CSS:
.bg-image {
width: 100vw;
height: 500px;
background-size: cover;
background-position: center;
background-image: url(/images/image-lg_1x.jpg)
background-image: -webkit-image-set(
url(/images/image-lg_1x.webp) 1x,
url(/images/image-lg_2x.webp) 2x
);
background-image: image-set(
url(/images/image-lg_1x.jpg) 1x,
url(/images/image-lg_2x.jpg) 2x
);
@media(max-width: 900px) {
background-image: url(/images/image-md_2x.jpg);
background-image: -webkit-image-set(
url(/images/image-md_1x.webp) 1x,
url(/images/image-md_2x.webp) 2x
);
background-image: image-set(
url(/images/image-md_1x.jpg) 1x,
url(/images/image-md_2x.jpg) 2x
);
}
@media (max-width: 600px) {
background-image: url(/images/image-sm_2x.jpg);
background-image: -webkit-image-set(
url(/images/image-sm_1x.webp) 1x,
url(/images/image-sm_2x.webp) 2x
);
background-image: image-set(
url(/images/image-sm_1x.jpg) 1x,
url(/images/image-sm_2x.jpg) 2x
);
}
}