Chương 3: CSS - Dự án
54. CSS Relative Lengths | Đơn vị vw, vh CSS | Giải thích chi tiết về đơn vị tương đối CSS
Giảng viên: cc tuhocThời lượng: 4 phútThuộc khoá: HTML, CSS cơ bản dễ hiểu- Khóa học HTML, CSS từ Zero Tới Hero (291 bài · miễn phí)
Tự Học Lập Trình Web Cơ Bản - Bài 54: CSS Relative Lengths | Đơn vị vw, vh CSS | Giải Thích Chi Tiết về Đơn Vị Tương Đối CSS Chào mọi người và chào mừng đến với kênh TuHoc.cc! Trong bài học hôm nay, chúng ta sẽ tập trung vào một phần quan trọng của CSS - đơn vị đo lường tương đối, cụ thể là 'vw' và 'vh'. Đây là những khái niệm quan trọng trong lập trình web, đặc biệt đối với người mới bắt đầu. 1. CSS Relative Lengths là gì? Trước hết, chúng ta sẽ hiểu rõ CSS Relative Lengths là gì. CSS Relative Lengths là cách chúng ta sử dụng đơn vị đo lường dựa trên kích thước của phần tử cha hoặc cửa sổ trình duyệt. Trong bài học này, chúng ta sẽ tập trung vào hai đơn vị quan trọng nhất: 'vw' và 'vh'. 2. 'vw' - Viewport Width 'vw' là viết tắt của "viewport width" (độ rộng của cửa sổ trình duyệt). Đơn vị này cho phép bạn xác định kích thước của một phần tử dựa trên một phần trăm của độ rộng của cửa sổ trình duyệt. Chúng ta sẽ thảo luận về cách sử dụng 'vw' để làm cho giao diện web trở nên linh hoạt và thích nghi với kích thước màn hình khác nhau. 3. 'vh' - Viewport Height Tương tự, 'vh' là viết tắt của "viewport height" (độ cao của cửa sổ trình duyệt). Điều này cho phép bạn xác định kích thước dựa trên một phần trăm của chiều cao của cửa sổ trình duyệt. Chúng ta sẽ khám phá cách sử dụng 'vh' để tạo ra các hiệu ứng hấp dẫn trên trang web của bạn. 4. Tại sao sử dụng Relative Lengths? Chúng ta sẽ thảo luận về lý do tại sao bạn nên sử dụng 'vw' và 'vh', và các trường hợp sử dụng thích hợp cho từng đơn vị này. Chúng ta sẽ xem xét các ví dụ cụ thể để hiểu rõ hơn về cách áp dụng chúng vào dự án của bạn. 5. Bắt đầu với CSS Relative Lengths Nếu bạn là người mới bắt đầu với lập trình web hoặc bạn muốn cải thiện kiến thức của mình về CSS, bài học này dành cho bạn. Chúng ta sẽ đi sâu vào từng khía cạnh của 'vw' và 'vh' để bạn có thể áp dụng chúng một cách tự tin trong các dự án của mình. 6. Kết Luận Cuối cùng, trong bài học này, chúng ta sẽ tổng kết những điểm quan trọng và cách bạn có thể tận dụng đơn vị 'vw' và 'vh' để làm cho trang web của bạn trở nên đẹp và thân thiện với người dùng trên mọi thiết bị.