@Media chiều rộng tối thiểu & chiều rộng tối đa

225

Tôi có @mediathiết lập này :

HTML :

<head>
  <meta name="viewport" content="width=device-width, user-scalable=no" />
</head>

CSS :

@media screen and (min-width: 769px) {
    /* STYLES HERE */
}

@media screen and (min-device-width: 481px) and (max-device-width: 768px) { 
    /* STYLES HERE */
}

@media only screen and (max-device-width: 480px) {
    /* STYLES HERE */
}

Với thiết lập này, nó hoạt động trên iPhone nhưng nó không hoạt động trong trình duyệt.

Có phải vì tôi đã có devicetrong meta và có thể có max-width:480pxthay thế?

css mobile media-queries

— cuộc biểu tình
nguồn

1

Vấn đề là gì - Kiểu mặc định sẽ được áp dụng cho màn hình rộng hơn 769 px.

— Gurpreet Singh

chỉ cần xóa @media screen and (min-width:769px){xung quanh các kiểu trình duyệt thông thường của bạn

— Zoltan Toth

Ý bạn là gì Zoltan? Và tôi nghĩ rằng tôi có thể giải quyết nó. Đầu tiên, vấn đề là khi tôi thay đổi kích thước trình duyệt của mình bằng thiết bị tối đa - với nó hoạt động trên điện thoại nhưng không hoạt động trong broswer, không có "thiết bị" thì nó hoạt động ở cả hai.

— cuộc biểu tình

Rất cơ bản với "thiết bị", nó hoạt động trên cả thiết bị di động / trình duyệt nhưng khi tôi thêm thiết bị, tôi không thể thấy nó trong trình duyệt \

— biểu diễn vào

1

Nó phải là 980pxkhông 960bởi vì kích thước trình duyệt đầu tại 980px.

339

Tôi đã tìm thấy phương pháp tốt nhất là viết CSS mặc định của bạn cho các trình duyệt cũ hơn, vì các trình duyệt cũ hơn bao gồm 5.5, 6, 7 và 8. Không thể đọc @media. Khi tôi sử dụng @media, tôi sử dụng nó như thế này:

<style type="text/css">
    /* default styles here for older browsers. 
       I tend to go for a 600px - 960px width max but using percentages
    */
    @media only screen and (min-width: 960px) {
        /* styles for browsers larger than 960px; */
    }
    @media only screen and (min-width: 1440px) {
        /* styles for browsers larger than 1440px; */
    }
    @media only screen and (min-width: 2000px) {
        /* for sumo sized (mac) screens */
    }
    @media only screen and (max-device-width: 480px) {
       /* styles for mobile browsers smaller than 480px; (iPhone) */
    }
    @media only screen and (device-width: 768px) {
       /* default iPad screens */
    }
    /* different techniques for iPad screening */
    @media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
      /* For portrait layouts only */
    }

    @media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
      /* For landscape layouts only */
    }
</style>

Nhưng bạn có thể làm bất cứ điều gì bạn thích với @media của bạn, Đây chỉ là một ví dụ về những gì tôi thấy tốt nhất cho tôi khi xây dựng kiểu cho tất cả các trình duyệt.

Thông số kỹ thuật CSS iPad.

Cũng thế! Nếu bạn đang tìm kiếm khả năng in, bạn có thể sử dụng@media print{}

— bashleigh
nguồn

16

Tại sao bạn đặt màn hình 'mac'? Đó không chỉ là máy Mac "tuyệt vời" có thể có màn hình độ phân giải cao lớn!

— Lu-ca

38

Vấn đề cơ bản là sử dụng max-device-widthso với cũ max-width.

Sử dụng từ khóa "thiết bị" nhắm mục tiêu kích thước vật lý của màn hình, không phải chiều rộng của cửa sổ trình duyệt.

Ví dụ:

@media only screen and (max-device-width: 480px) {
    /* STYLES HERE for DEVICES with physical max-screen width of 480px */
}

Đấu với

@media only screen and (max-width: 480px) {
    /* STYLES HERE for BROWSER WINDOWS with a max-width of 480px. 
       This will work on desktops when the window is narrowed.  */
}

— jpostdesign
nguồn

11

Nếu trang web trên các thiết bị nhỏ hoạt động như màn hình máy tính để bàn thì bạn phải đặt thẻ meta này vào tiêu đề trước

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

Đối với truy vấn phương tiện, bạn có thể đặt điều này là

điều này sẽ bao gồm tất cả các chiều rộng điện thoại di động / điện thoại di động của bạn

    @media only screen and (min-width: 200px) and (max-width: 767px)  {
    //Put your CSS here for 200px to 767px width devices (cover all mobile portrait width //

    }

Đối với iPad và iPad pro, bạn phải sử dụng

    @media only screen and (min-width: 768px) and (max-width: 1024px)  {
    //Put your CSS here for 768px to 1024px width devices(covers all iPad portrait width //

    }

Nếu bạn muốn thêm css cho chế độ Phong cảnh, bạn có thể thêm điều này

và (định hướng: cảnh quan)

  @media only screen and (min-width: 200px) and (max-width: 767px) and (orientation : landscape) {
        //Put your CSS here for 200px to 767px width devices (cover all mobile landscape width //

        }

— Rohit Kaushik
nguồn

8

Giá trị chính xác cho contentthuộc tính nên bao gồm initial-scale:

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

Mở rộng đoạn trích

— Ksenia Titova
nguồn

2

Nếu bạn có thể giải thích tại sao và thêm tài liệu tham khảo, điều đó sẽ làm cho câu trả lời này hữu ích hơn.

— Michael Benjamin

2

@Michael_B Ban đầu là 'user-scalable = no'. Điều đó nói lên tất cả những gì tôi nghĩ.

— Apolo Radome

0

Đối với một số iPhone, bạn phải đặt chế độ xem của mình như thế này

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, shrink-to-fit=no, user-scalable=0" />

— NuggaN85
nguồn