Hướng dẫn Responsive bằng CSS cơ bản

0
555
reponsive bằng css

Trong bài viết này mình sẽ hướng dẫn các bạn responsive một giao diện đơn giản, từ đó thì chúng ta sẽ triển khai những giao diện khó hơn. Chúng ta có thể responsive bằng css hoặc bootstrap, ở bài viết này mình sẽ dụng css thôi. Với css lại có vài cách để chia layout :D. Mình xin được bắt đầu bài viết.

form đang ky html css

 

Responsive là gì ?

Trước tiên chúng ta phải hiểu nó là gì đúng không ?

Trang web của chúng ta thiết kế ra xem được trên mọi thiết bị từ pc laptop ipad moblie bphone, iphone các kiểu thì đó là responsive. Thế thôi chứ cũng chẳng có gì cao siêu cả 😀

Hướng dẫn Responsive bằng CSS cơ bản

Đây là giao diện sản phẩm của mình :D, đơn giản thôi.

Demo: click vào đây để xem kết quả

PC

Hướng dẫn Responsive bằng CSS cơ bản 1

Mobile

responsive html css

Bây giờ thì mình sẽ code và giải thích chi tiết ngay phía sau, các bạn có thể click vào đây để xem kết quả.

Code:html

Code CSS:

Mình đã thiết kế giao diện này theo hướng mobile first, có nghĩa là sẽ xây dựng giao diện cho mobile trước sau đó

mới thiết kế giao diện trên các thiết bị khác. Chia layout trên mobile thì tương đối dễ, chỉ cần đặt các khối trên một cột là được rồi. Sau khi đã chia layout cho mobile mình sử dụng lệnh @media(min-width:900px) để chia layout, có nghĩa là nó sẽ hiển thị giao diện của những thiết bị có kích thước màn hình lớn hơn 900px. Mình sử dụng thuộc tính chia layout display:grid để chia. Đây là phương pháp mới nhất, mọi người có thể tìm hiểu trên moliza developer.

Okê vậy là chúng ta đã có một giao diện responsive cơ bản rồi đấy. Mình xin được kết thúc bài viết tại đây.

Xem các bài viết khác tại đây 

avatar
  Subscribe  
Notify of