Bài 29 sẽ giới thiệu cho các bạn về cách tạo responsive cho web. Nói dễ hiểu là giao diện sẽ tùy biến thay đổi để phù hợp với kích thước màn hình hiển thị. Trong bài mình sẽ hướng dẫn một ví dụ đơn giản là thay đổi kích thước hình khi màn hình hiển thị thay đổi Show Nội dung chính
Video – Cách tạo responsive cho webHướng dẫn chi tiết"Người ta tắt AdsBlock không phải vì người ta dại, mà người ta quý mình nên coi quảng cáo" Hosting WordPress nhanh, rẻ và dễ sử dụng có free SLL hãy chọn Azdigi nhé. Link đăng ký: NHẬN NGAY ƯU ĐÃI Nếu các bạn mua hosting từ link trên, mình sẽ có một ít tiền để duy trì. Cảm ơn Giới thiệu về responsiveResponsive là một phần không thể thiếu trong mọi website vì với công cụ này thì website của bạn nâng cao trải nghiệm người dùng và cũng được google đánh giá cao hơn. Web responsive sẽ thay đổi giao diện tùy theo kích thước của màn hình hiển thị. Giúp người dùng dễ tương tác và sử dụng trang web Một số ví dụ về đáp ứngTrang chủ Góc làm web khi hiển thị trên màn hình máy tính  Bài viết cùng chủ đề bài 28. Cách tạo hoạt hình trong css bài 27. Bài tập về flexbox và cách căn giữa cho… "Ra đời, cuộc sống bươm chải, có làm vẫn không có ăn" nên phải gắn QUẢNG CÁO Các bạn cần hosting WordPress nhanh, rẻ và dễ sử dụng có free SLL hãy chọn Azdigi nhé. Link đăng ký: NHẬN NGAY ƯU ĐÃI Nếu các bạn mua hosting từ link trên, mình sẽ có một ít tiền để duy trì. Cảm ơn Giao diện Góc làm web trên màn hình nhỏ Như chúng ta thấy, ngoài việc các khối thay đổi vị trí, menu cũng thay đổi định dạng File fileThay đổi kích thước một hình ảnh trên web bằng cách sử dụng đáp ứng Hướng dẫn nhanh + Thêm thẻ vào bên trong thẻ head + Phần CSS @media screen and (max-width: 2000px) {
Định dạng của các khối khi màn hình có chiều rộng nhỏ hơn 2000px;
}
@media screen and (max-width: 480px) {
Định dạng của các khối khi màn hình có chiều rộng nhỏ hơn 480px;
}
Các thuộc tính đã dẫn hướngCác thuộc tính thường dùng+ hình nền. -webkit-linear-gradient(trái, đỏ 0%, cam 50%, vàng 100%), hiệu ứng đổ màu gradient + biến đổi. scale(2), zoom effect, zoom to thu small + kích thước hộp. hộp viền, chiều rộng cố định và chiều cao + biến đổi. rotate(-45deg) to rotate block div angle 45 độ + bán kính đường viền. 5px; + kích thước nền. cover, for always full 100% blocks + tệp đính kèm nền. đã sửa (cố định hình nền khi cuộn trang) + nth-child(3) to override css for các đoạn giống nhau + lề. auto, auto canh biên + chuyển đổi văn bản. chữ hoa, tự động viết hoa + bóng hộp. 2px 2px 7px; + chuyển tiếp. 0. 4s; + nổi. left (right) default blocks + tràn. ẩn giấu + hiển thị. block, biến thẻ không xuống dòng thành khối để thuộc tính lề + hiển thị. inline, variable to the cards not down line + lề và phần đệm, biên tính từ đường viền của khối ra bên ngoài, lề tính từ đường viền của khối vào bên trong nội dung + biên giới. viền, 1px (độ dày) đen (màu) đặc (nét rõ) + căn chỉnh văn bản. canh lề + cỡ chữ. size + font-weight : bold độ đậm nhạt, giống như thẻ + họ phông chữ. type letter hay font chữ + kiểu chữ. chữ nghiêng. tạo chữ nghiêng + trang trí văn bản. không có, gạch dưới + chiều cao dòng. 20px. extension line + màu sắc. (color signature) used green, red or color code + màu nền. (màu nền) đen + hình nền. url(nguồn hình ảnh), hình nền Các thuộc tính flexboxtrưng bày. uốn cong; . inline-flex hướng uốn + row, by row compatible with float. bên trái + row-reverse, theo hàng từ sau ra trước, float. bên phải; + cột, theo cột từ trên xuống dưới + đảo ngược cột, theo hàng từ dưới lên trên flex-wrap (có xuống dòng hoặc không đủ chiều rộng) + không quấn. ko xuống dòng, chỉ hiện thị trên 1 hàng + bọc. đủ chiều rộng của khối cha thì tự động xuống dòng + bọc ngược. đảo ngược biện minh cho nội dung. canh chỉnh theo chiều ngang cho các khối bên trong + trung tâm. auto base between (tương đương text-align. trung tâm) + flex-start (don to left) + flex-end (don sang must) + space-between ( chia đều trong khối) + space-around (chia đều các khối và hai lề của khối bên ngoài) sắp xếp các mục. canh chỉnh theo chiều dọc (khối bên ngoài phải có độ cố định cao) + căng. tự động xóa toàn bộ chiều cao + khởi động linh hoạt. up on + uốn dẻo. down the bottom + đường cơ sở. chỉ canh chữ cho thẳng hàng + trung tâm. canh giữa theo chiều dọc. Thuộc tính này hỗ trợ rất nhiều cho việc làm web và là thuộc tính mới chỉ có từ CSS 3 Thuộc tính chia lớp+ vị trí. quan hệ; + vị trí. tuyệt đối; + hàng đầu. 10px, vị trí tính từ trên xuống + đáy. 10px, vị trí tính từ dưới lên + trái. 10px, position from side left + phải. 10px, position from side must Các thuộc tính tạo hoạt hình@-webkit-keyframes ten-animation{ From{đầu trạng thái} To{ status after } } + Sử dụng hoạt ảnh cho đối tượng Thuộc tính tổng hợp. hoạt hình. tên-hoạt hình chuyển tiếp thời gian; Một số thuộc tính riêng tên hoạt hình. tên hoạt hình sẽ áp dụng cho các đối tượng chậm trễ hoạt hình. phim hoạt hình ngắn thời gian; hoạt hình-lặp lại-đếm. số lần thực hiện; hướng hoạt hình. chiều chạy hoạt hình; chế độ hoạt hình-điền. xác định trạng thái của một hoạt ảnh, khi hoạt ảnh đó không được chạy (có thể là hoạt ảnh này đã chạy xong hoặc đang bị trì hoãn) mẫu mã. Tải xuống Nếu có thắc mắc, hãy đặt câu hỏi bằng cách bình luận bên dưới, qua email, hoặc nhắn tin qua Fanpage Góc làm web |
