CSS Media

0
59

Đây là tính năng mới của CSS3, cho phép chúng ra có thể chỉnh được CSS trên nhiều thiết bị khác nhau, từ màn hình máy tính đến màn hình mobile. Cú pháp như sau :

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

Các thuộc tính hay sử dụng:

  • all: Dùng cho mọi thiết bị
  • print: Dùng cho máy in
  • screen: Dùng cho máy tính và các thiết bị smart phone

Sử dụng @media để tạo reponsive cho web

Ví dụ:

<!DOCTYPE html>
<html>
    <head>
        <title>Tạo 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: 70%;
            }
            .right{
                background: red;
                float: right;
                width: 30%;
            }
             
        </style>
    </head>
    <body>
        <div class="container">
            <div class="left">
                LEFT
            </div>
            <div class="right">
                RIGHT
            </div>
        </div>
    </body>
</html>

Sử dụng @media với các thiết bị di động và máy tính

PC:

@media screen and (min-width: 1024px){
  
}

Mobile:

@media screen and (max-width: 768px){
    
}

Ipad:

@media screen and (min-width: 768px) and (max-width: 1024px){ }

BÌNH LUẬN

Vui lòng nhập bình luận của bạn
Vui lòng nhập tên của bạn ở đây