Responsive là một tính từ để nói về một website có thể hiển thị tương thích trên mọi kích thước màn hình hiển thị của trình duyệt web.
Responsive hoạt động dựa vào css mà chúng ta viết cho trang web. Trình duyệt đọc css và hiển thị đúng với mục đích của chúng ta đưa ra. Với từng kích thước chúng ta sẽ có một đoạn css khác nhau để hiển thị và trình duyệt sẽ kiểm tra xem kích thước hiện tại là bao nhiêu để áp dụng đoạn css để hiển thị ra. Việc xử lý này nằm hoàn toàn ở máy của người sử dụng.
Để có thể hoạt động được thì cần phải khai báo trong thẻ <head> </head> của file HTML đoạn mã như sau:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
Trong đó có các thuộc tính:
meta viewport giúp trình duyệt hiển thị tương ứng với kích thước của màn hình.
content:
width: Thiết lập chiều rộng.
device-width: Chiều rộng của thiết bị.
height: Thiết lập chiều cao.
device-height: Chiều cao cố định.
minimum-scale: Mức phóng to tối thiểu của thiết bị với trình duyệt.
maximum-scale: Mức phóng to tối đa của thiết bị với trình duyệt.
user-scalable: Cho phép người dùng phóng to, giá trị là yes hoặc no.
Chúng ta sẽ viết css trong đoạn khai báo sau:
@media all and (max-width: 320px){ // code css here .... }
@media all and (min-width: 320px){ // code css here .... }
Ngoài ra ta cũng có còn có cách khai báo khác cho riêng 1 kích thước nhất định:
@media only screen and (min-width: 320px) and (max-width: 768px) {...}
Là một quy trình thực hiện thiết kế đi từ giao diện cho mobile đầu tiên sau đó mới tới những thiết bị khác như ipad, laptop, desktop …
Khi viết css Mobile-first ta chủ dùng min-width thôi. Tức là thiết bị có chiều rộng tối thiểu sẽ được áp dụng css trong @media all and (min-width: 320px){}.
Framework Css là thư viện mã nguồn CSS được xây dựng theo cấu trúc và thực hiện chức năng nhất định nào đó thông qua việc khai báo các class để áp dụng vào xây dựng website một cách nhanh tróng tiết kiệm thời gian.
Framework Css thông dụng như là Bootstrap, Foundation … có rất nhiều framework css :D. Bạn cũng có thể tự xây dựng cho mình một framework css riêng.
