Loadding..

Responsive là gì và Mobile-first là gì ?

Responsive là gì và Mobile-first là gì ?

Responsive là gì ?

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 như thế nào ?

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.

Viết css Responsive như thế nào ?

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 .... }
  • 320px là kích thước chiều rộng màn hình, mới màn hình thiết bị khác ta có thể thay đổi nó cho phù hợp.

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) {...}
  • Chỉ áp dụng cho màn hình có chiều rộng lớn hơn 320px và nhỏ hơn 768px mà thôi (kích thước như này là dành cho mobile đó 😀 ).

 

Mobile-first là gì ?

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){}. 

4 tiêu chí Responsive:

  1. A fluid grid
  1. Fluid images & Videos
  1. Media queries: (CSS3)
  1. Responsive Navigation

 

Framework css responsive ?

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à BootstrapFoundation …  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.

 

 

Print
Image

enqtran

I’m enqtran – A coder and blogger :)
[email protected]