Code Responsive dành cho di động

Code Responsive dành cho di động

Responsive là gì?

Responsive là thuật ngữ dùng để chỉ những website có thiết kế tương thích với nhiều thiết bị, nhiều kích cỡ trình duyệt.
Nói cách khác code responsive dành cho di động giúp bạn code theo hướng bạn thích, bạn muốn trên điện thoại mình hiện thị như thế nào thì tất cả đều gọi là responsive.

Cách code Responsive như thế nào ?

Cách code cũng rất đơn giản, các bạn cứ làm theo các bước dưới của mình nhé!

1. Cài thư viện responsive:

   trước khi code bạn phải xem source của mình có thư viện hay chưa, nếu chưa hay thêm nó vào file header.php nhé. nếu ko có thư viện thì web bạn code ko có hiển thị được đâu.

   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />

2. Dưới đây là các đoạn code dành cho nhiều thiết bị bạn nên biết (code chuẩn mình hay sài và chuẩn Bootstrap nữa)

   /* code dành cho điện thoại với kích thước tối đa 480px */
   @media only screen and (max-width: 480px) {...} 
   
   /* code dành cho các điện thoại kích thước nằm trong khoảng 480px đến 768px */
   @media only screen (min-width: 480px) and (max-width: 768px){...}  
   
   /* code dành cho thiết bị tablets nằm trong khoảng 768px đến 992px) */
   @media only screen (min-width: 768px) and (max-width: 992px){...} 
   
   /* code dành cho laptop desktop với kích thước lớn*/
   @media only screen and (min-width: 1200px) {...}

   Vậy là xong bài hướng dẫn Code Responsive dành cho di động, bài này bạn có thể làm được những bài viết mà mình đã viết như code from icon đẹp liên hệ ở footer link: Bấm Tại Đây

   xong nhé anh em, thấy hay tiếc gì 1 like nhỉ phải không anh em :p

   Các bạn có gì thắc mắc cứ liên hệ với mình hoặc để lại comment bên dưới, like face để có nhiều tin mới hơn nhé. mình sẽ hỗ trợ hết sức, thank you mọi người nhé!