Media CSS là gì? Giới thiệu 02 cách sử dụng Media CSS cơ bản

16/05/2022 10:11 am | Lượt xem : 10680

Bạn đã tìm hiểu các thông tin về Media CSS chưa? Hiện nay các điều kiện cơ bản có thể được sử dụng dựa trên loại phương tiện hoặc cài đặt mặc định của thiết bị.
Việc kết hợp truy vấn truyền thông với bố cục linh hoạt cho phép bạn thiết kế website sinh động và đặc biệt hơn.
Tại bài viết này, chúng tôi sẽ giới thiệu các cách truy vấn Media CSS để thay đổi kiểu dáng trang web. Chúng tôi sẽ phân tích cụ thể cách truy vấn thông tin về thiết bị, cách tiếp cận để giải quyết vấn đề trong thiết kế trang web. Mời bạn đọc cùng theo dõi.

Contents

Media CSS là gì?
Một số thuộc tính cơ bản của Media featured
Hướng dẫn sử dụng Media CSS để tạo Responsive Website
Hướng dẫn Sử dụng Media CSS với các thiết bị di động và máy tính
Lời kết
Các tìm kiếm liên quan đến chủ đề “Media CSS là gì”
- Bài viết liên quan

Media CSS là gì?

Media CSS trên thực tế là một công nghệ được ra mắt trong CSS3. Media CSS sử dụng thông qua các số kích thước màn hình được thông báo qua Media. Với công nghệ này chúng ta có thể phân đoạn CSS thành nhiều phần khác nhau tương ứng với kích thước các loại thiết bị.
Thuộc tính này có một cú pháp đơn giản như sau:

@
media not | only mediatype and(media feature) {
    CSS - Code;
}

Trong cú pháp trên, mediatype bao gồm các thuộc tính hay sử dụng dưới đây:

All: Được dùng cho mọi thiết bị.
Print: Được dùng cho thiết bị là máy in.
Screen: Dùng cho máy tính và các thiết bị smart phone có màn hình cảm ứng.

Trên thực tế, vẫn còn nhiều những thuộc tính khác. Tuy nhiên ứng với lập trình web thì chúng ta thường dùng ba thuộc tính trên nhất. Ngoài ra để tìm hiểu dễ hơn về các thuộc tính thì bạn cần phân biệt hai khái niệm sau đây:

Device: Là thiết bị sử dụng website như điện thoại, Laptop, Máy tính để bàn,…
Viewpoin: Là kích thước hiển thị của màn hình thiết bị.

Dưới đây là ví dụ về một trong hai khái niệm trên.

<meta name="viewport" content="width=device-width, initial-scale=1">

Bạn cần mua một tên miền để bắt đầu website của mình

Để đăng ký mua tên miền tại Tenten.vn , quý khách chỉ cần làm theo các bước sau:
Bước 1: Kiểm tra sự tồn tại của tên miền: Nhập tên miền và nhấn “kiểm tra”.

Kiểm tra

Bước 2:
BẤM VÀO ĐÂY ĐỂ NHẬN ƯU ĐÃI TÊN MIỀN

Một số thuộc tính cơ bản của Media featured

Để làm việc được thuận tiện hơn bạn cũng cần biết thêm về các thuộc tính cơ bản của Media featured.
Dưới đây là bảng liệt kê một số thuộc tính thông dụng:

aspect-ratio	Tỉ lệ giữa chiều rộng và chiều cao của viewport
min-aspect-ratio	Tỉ lệ tối thiểu giữa chiều rộng và chiều cao của viewport
max-aspect-ratio	Tỉ lệ tôi đa giữa chiều rộng và chiều cao của viewport
color	Số bits cho mỗi màu sắc của device
color-index	Số lượng màu sắc mà device có thể hiển thị
device-aspect-ratio	Tỉ lệ giữa chiều rộng và chiều cao của device
max-device-aspect-ratio	Tỉ lệ tối đa giữa chiều rộng và chiều cao của device
device-height	Chiều cao của device
device-width	Chiều rộng của device
height	Chiều cao của viewport
width	Chiều rộng của viewport
max-width	Chiều rộng tối đa của viewport
max-height	Chiều cao tối đa của viewport
min-width	Chiều rộng tối thiểu của viewport
min-height	Chiều cao tối thiểu của viewport
min-device-width	Chiều rộng tối thiểu của device
max-device-width	Chiều rộng tối đa của device
min-device-height	Chiều cao tối thiểu của device
max-device-height	Chiều cao tối đa của device
orientation	Định hướng của khung nhìn (xoay hoặc không xoay màn hình thiết bị)
resolution	Độ phân giải của thiết bị đầu ra (sử dụng dpi hoặc dpcm)

Để giúp các bạn hình dung chúng tôi xin đưa ra một ví dụ minh họa sau:
Nếu bạn lựa chọn chiều rộng của trình duyệt nhỏ hơn 480px thì cần ẩn class.large như sau:

@
media only screen and(max - width: 480 px) {
      .large {
        display: none;
    }
}

Hướng dẫn sử dụng Media CSS để tạo Responsive Website

Hướng dẫn sử dụng Media CSS để tạo Responsive Website

Ngoài việc sử dụng max-width đôi khi chúng ta còn có một tham số được sử dụng như min-width. Khi sử dụng Media query, bạn có thể đưa ra các phân đoạn để viết CSS theo kích thước chiều rộng của màn hình thiết bị.
Bản chất của Responsive chính là một sự kết hợp của media query và tính ưu tiên của CSS trên một đối tượng.
Dưới đây là một hướng dẫn cơ bản về việc dùng Media CSS để tạo Responsive:

<!DOCTYPE html>
<html>
<head>
    <title>Media responsive</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .left,
        .right {
            height: 400px;
        }
        .left {
            background: blue;
            float: left;
            width: 60%;
        }
        .right {
            background: red;
            float: right;
            width: 40%;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="left">
            LEFT
        </div>
        <div class="right">
            RIGHT
        </div>
    </div>
</body>
</html>

Trong trường hợp bạn đã tạo theo cấu trúc trên nhưng muốn kích thước trình duyệt nhỏ đi. Tức là nhỏ hơn 769px để chỉ hiển thị website theo 1 hàng dọc. Lúc này bạn sẽ thiết lập CSS như mẫu sau đây:

@
media only screen and(max - width: 768 px) {
        .left, .right {
        float: none;
        width: 100 % ;
    }
}

Hướng dẫn Sử dụng Media CSS với các thiết bị di động và máy tính

Khi đọc phần danh sách các thuộc tính của Media CSS chắc hẳn bạn đã hình dung được cách dùng rồi phải không.
PC first trong Responsive (PC first là một khái niệm để chỉ tuần tự responsive giao diện từ màn hình máy tính, laptop to xuống màn hình nhỏ của điện thoại, máy tính bảng).
Dưới đây là các câu query cho thiết bị di động thông dụng:

/*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) {}

Nếu bạn cần responsive trên nhiều thiết bị hơn thì cần phải xác định kích thước của nó và rồi thêm vào danh sách theo thứ tự. Bạn nên thêm màn hình to vào trước sau đó thêm màn hình nhỏ vào sau.
Theo cách làm này thì một Selector trong CSS cần Style đi qua từ màn hình lớn đến nhỏ sẽ thay đổi theo thứ tự ưu tiên.

Lời kết

Trên đây là bài viết giới thiệu đến bạn đọc chức năng cũng như nhiệm vụ của Media CSS. Hiện nay, người dùng hay sử dụng điện thoại thông minh hơn là các thiết bị máy tính.
Chính vì thế việc sử dụng tốt Media CSS giúp ích rất nhiều cho website của bạn. Chúng tôi hy vọng rằng qua bài viết này, bạn sẽ có nhiều kiến thức hơn về cách sử dụng Media CSS để tạo nên một website. Cảm ơn bạn đã quan tâm theo dõi.

MiraWEB – Tạo website tự động bằng AI trong 30 giây

Bằng công nghệ AI, MiraWEB sẽ tạo ra một trang web chuyên nghiệp với ý tưởng của riêng bạn chỉ với vài cú click
Không cần phải có kiến thức về lập trình hay thiết kế, website của bạn sẽ được tối ưu nội dung và hình ảnh chỉ trong giây lát

TRẢI NGHIỆM NGAY MiraWEB

Vào nhóm Zalo để nhận thêm nhiều ưu đãi hơn nữa
Hotline: (024) 71 089 999
Email: info@tenten.vn

Các tìm kiếm liên quan đến chủ đề “Media CSS là gì”

Media screen là gì	@media screen and (max-width 480px)
Media CSS	Responsive CSS
@media screen and (max-width 768px)	Responsive CSS la gì
Media query	Media query flutter