Làm thế nào để có công việc lập trình web chỉ sau 90 ngày học tại nhà? BẤM VÀO ĐÂY XEM MIỄN PHÍ

Media query, PC First, Mobile First trong Responsive web

Media query là gì?

Như tôi đã giới thiệu ở phần trước Media query là một "công nghệ" được giới thiệu trong Css3. Nguyên tắc nó sử dụng trên thông qua các thông số kích thước màn hình được khai báo thông qua @media

Với công cụ này chúng ta có thể phân đoạn Css chúng ta ra nhiều phần khác nhau tương ứng với kích thước của các loại thiết bị

Ví dụ đoạn Css sau áp dụng cho các thiết bị có độ rộng màn hình bé hơn 1024px

@media screen and (max-width: 1024px){
    #wrapper{ width: 100%;}
}

Cụ thể div bao quanh toàn bộ website sẽ tự động co vào bằng độ rộng thiết bị khi thiết bị có độ rộng nhỏ hơn 1024px(Ipad ngang)

Ngoài max-width chúng ta còn có tham số hay được sử dụng như min-width. Vậy việc sử dụng Media query nhằm mục đích đưa ra các phân đoạn để viết Css theo độ rộng màn hình các thiết bị.

Vậy bản chất của RESPONSIVE là sự kết hợp của media query và tính ưu tiên thực thi của Css trên cùng một đối tượng

Ví dụ sau cho chúng ta sửa thay đổi background của body từ màu trắng => đen=> đỏ của body web khi độ rộng thiết bị thay đổi.

/*Background mặc định của body*/
body{ background: #fff;}

/*Ipad ngang(1024 x 768)*/
@media screen and (max-width: 1024px){
    body{ background: black;}
}
/*Ipad dọc(768 x 1024)*/
@media screen and (max-width: 768px){
    body{ background: red;}
}
/*Tablet nhỏ(480 x 640)*/
@media screen and (max-width: 480px){
    
}
/*Iphone(480 x 640)*/
@media screen and (max-width: 320px){
    
}
/*Smart phone nhỏ*/
@media screen and (max-width: 240px){
    
}


Tiếp theo chúng ta phân tích vì sau chúng ta lại có thể xây dựng lên các đoạn media query đấy và tìm hiểu qua khái niệm

  1. PC First trong Rseponsive
  2. Modile First trong Rseponsive

PC first trong Rseponsive

PC first là khái niệm để chỉ tuần tự responsive giao diện từ màn hình to xuống màn hình nhỏ

Để làm việc với mô hình này chúng ta sử dụng max-width trong media query

Dưới đây là các media query điển hình mà ta cần thêm vào dự án

/*Ipad ngang(1024 x 768)*/
@media screen and (max-width: 1024px){
  
}
/*Ipad dọc(768 x 1024)*/
@media screen and (max-width: 768px){
    
}
/*Tablet nhỏ(480 x 640)*/
@media screen and (max-width: 480px){
    
}
/*Iphone(480 x 640)*/
@media screen and (max-width: 320px){
    
}
/*Smart phone nhỏ*/
@media screen and (max-width: 240px){
    
}

 

Ngoài ra, nếu mình cần responsive trên nhiều thiết bị hơn thì công việc của chúng ta là cần xác định kích thước của nó và thêm vào danh sách media query kia theo thứ tự màn hình to ở trên màn hình nhỏ query ở dưới.

Theo cách này thì khi một Selector trong css cần style đi qua từ màn hình to đến nhỏ sẽ được thay đổi theo thứ tự ưu tiên

Trái ngược với PC First chúng ta cùng đi qua Mobile First

 

Mobile First trong Responsive

Tuần tự tiến trình responsive của chúng ta xuất phát từ màn hình nhỏ và xây dựng dần lên thiết bị có kích thước to

 

Trình tự thực hiện Responsive trong mobile First

 

Để làm việc với mô hình này chúng ta sử dụng tham số min-width trong media query

 


/*Smart phone nhỏ*/
@media screen and (min-width: 240px){
    
}
/*Iphone(480 x 640)*/
@media screen and (min-width: 320px){
    
}
/*Tablet nhỏ(480 x 640)*/
@media screen and (min-width: 480px){
    
}
/*Ipad dọc(768 x 1024)*/
@media screen and (min-width: 768px){
    
}
/*Ipad ngang(1024 x 768)*/
@media screen and (min-width: 1024px){
  
}


Với mô hình này thì khi style Css cho cùng một đối tượng thì theo thứ tự được ưu tiên từ màn hình nhỏ đến to, càng về sau các các Css ở các query màn hình to hơn được ưu tiên hơn. 

 

Kết luận

Trên là những phần bạn cần nắm trong Responsive và nên nhớ rằng Media query chính là mấu chốt của vấn đề. 

Trên thế giới người ta hay sử dụng Mobile First hơn nhưng với kinh nghiệm của tôi thì PC First luôn được ưu tiên vì nó hợp với việc xử lý trải nghiệm của người dùng khi lướt web từ thiết bị to xuống nhỏ. 

Ở những bài hướng dẫn tiếp ta cùng đi đến việc xử lý kích thước và hình ảnh trong responsive

 

Url Link

http://hocweb123.com/media-query-pc-first-mobile-first-trong-responsive-web.html

Tìm kiếm liên quan

Media query, PC First, Mobile First trong Responsive web