Chính xác thì Media Query là gì? | ĐÀO TẠO CÁC KHÓA HỌC NGẮN HẠN-DÀI HẠN
Niit - Ict Hà Nội » Tin tức » Tin tức công nghệ » Chính xác thì Media Query là gì?
Chính xác thì Media Query là gì?
chinh-xac-truy-van-media-la-gi
 
Có kĩ năng lập trình chỉ dựa vào code mẫu được tạo ra bởi người khác sẽ cản trở cho con đường nghề nghiệp của bạn, để có thể nói cái gì đó là kĩ năng của bạn, trước tiên bạn phải hiểu nó.
 
Đó là lý do tại sao tất cả những người tuyên bố có kiến thức chuyên sâu về RWD, chúng ta sẽ xem xét một về vấn đề cốt lõi: Media Query.
 
Giống như bất kỳ bài viết giải thích nào khác, điểm khởi đầu luôn luôn làm sáng tỏ yếu tố ‘What’.
 
Trong RWD, truy vấn media là một khai báo CSS được sử dụng làm tham số cho thời điểm gọi đến các khai báo kiểu khác dựa trên kích thước của thiết bị đang xem hiện tại. Có hai cách để gọi truy vấn media: Sử dụng Externall Stylesheet hoặc Inside Stylesheet.
 

Kiểu External

 
 
<link rel="stylesheet"; media="screen and (min-width:320px) and (max-width:480px)"; href="css/mobile.css" />
 
 

Viết CSS

 

 

@media screen and (min-width:320px) and (max-width:480px){

/*Style Declarations For This Width Range */

}

Cái gì được gọi ở đây?

 

Hai đoạn code trên là cả hai ví dụ về hai cách khác nhau để tạo các khai báo CSS mà chỉ được gọi khi thiết bị đang xem nằm trong khoảng từ 320px đến 480px. Ý tưởng về việc sử dụng cho hai tham số khai báo này là để gọi kiểu cho thiết bị di động có thể nằm ngoài phạm vi này.

 

Ví dụ: Tải một số kiểu css nhất định cho các thiết bị có chiều rộng tương tự như iPhone, nhưng khiến nó bị bỏ qua bởi một số thiết bị Blackberry. Vì chúng ta đã có hiểu biết chung về truy vấn media, hãy bắt đầu chia nhỏ truy vấn ra.

 

Đối với phần còn lại của bài viết này, chúng tôi sẽ chỉ đề cập đến cách gọi truy vấn media được sử dụng trực tiếp bên trong tệp CSS.

 

Từ khóa @media screen

 

Đối với những người không quen thuộc với thuộc tính Media, nó được sử dụng để tách riêng những kiểu được gọi cho các loại thiết bị khác nhau. Các loại được sử dụng phổ biến là print, speech, projection, braille, .... Mặc dù tính hữu ích của từng loại media, đối với RWD, trọng tâm của chúng ta sẽ được hướng về các loại màn hình.

 

Theo định nghĩa, giá trị màn hình chủ yếu dành cho màn hình máy tính màu và là giá trị mặc định cho CSS. Truy vấn đến media là cách bạn bắt đầu truy vấn và sau đó gọi vào các tham số của bạn.

 

Ví dụ:

 

Đặt background cho body thành màu đỏ trên màn hình PC

@media screen{

body{background: #ff0000;}

}

Đặt backgroud thành màu trắng để in

@media print{

body{background: #fff;}

}

Các tham số chiều rộng

 
Bây giờ là lúc để xem xét điều gì làm cho trang web của chúng ta responsive, các thông số chiều rộng. Nếu bạn đã theo dõi, bạn sẽ nhận ra rằng màn hình @media là từ khóa để bắt đầu truy vấn của chúng ta và thuộc tính chiều rộng tối thiểu, tối đa đặt làm tham số.
 
Vì vậy, bạn biết làm thế nào để css phong cách khác nhau cho chiều rộng xem khác nhau. Giống như trong ví dụ của chúng ta từ trước đó, chúng ta đặt chiều rộng tối thiểu là 320px và tối đa là 480px. Điều này có nghĩa là bất cứ khi nào thiết bị xem có chiều rộng giữa hai tham số này (từ 320px đến 480px) thì các khai báo css đặt trong tuy vấn sẽ được gọi đến.
 

Sự khác biệt giữa width và device-width

 
Đôi khi bạn sẽ thấy các lập trình viên thực hiện truy vấn đến device-width or width. Sự khác biệt giữa hai loại ở đây là device-width sẽ dựa theo chiều rộng có sẵn của thiết bị của bạn, bất kỳ thay đổi loại thu phóng nào cũng thế.
 

Ví dụ:

 

@media screen and (min-device-width:320px) and (max-device-width:480px){

/*Style Declarations For This Width Range */

aside{display:none;}

}

 

Có nghĩa là, màn hình từ 320px đến 480px như ví dụ bên dưới sẽ hiển thị 1 kiểu theo thiết bị cho dù có phóng to hay thu nhỏ.