Tại sao các truy vấn phương tiện CSS3 của tôi không hoạt động?

Trong các style.css, tôi đang sử dụng các truy vấn phương tiện, cả hai đều sử dụng một biến thể của:

/*--[ Normal CSS styles ]----------------------------------*/

@media only screen and (max-width: 767px) {

    /*--[ Mobile styles go here]---------------------------*/
}

Các trang web thay đổi kích thước theo bố cục tôi muốn trong một trình duyệt thông thường (Safari, Firefox) khi tôi thu nhỏ cửa sổ, tuy nhiên, bố cục di động hoàn toàn không hiển thị trên điện thoại. Thay vào đó, tôi chỉ thấy CSS mặc định.

ai đó có thể chỉ cho tôi phương hướng đúng không?

Tất cả ba trong số này là những lời khuyên hữu ích, nhưng có vẻ như tôi cần thêm thẻ meta:

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

Bây giờ có vẻ như nó hoạt động trong cả Android (2.2) và iPhone ...

Đừng quên để có các khai báo css tiêu chuẩn bên trên truy vấn phương tiện hoặc truy vấn sẽ không hoạt động.

.edcar_letter{
    font-size:180px;
}

@media screen and (max-width: 350px) {
    .edcar_letter{
        font-size:120px;
    }
}

Tôi nghi ngờ từ khóa onlycó thể là vấn đề ở đây. Tôi không gặp vấn đề gì khi sử dụng truy vấn phương tiện như thế này:

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

Tôi đã sử dụng bootstrap trong một trang web báo chí nhưng nó không hoạt động trên IE8, tôi đã sử dụng javascript css3-mediaqueries.js nhưng vẫn không hoạt động. nếu bạn muốn truy vấn phương tiện của mình hoạt động với tệp javascript này, hãy thêm màn hình vào dòng truy vấn phương tiện của bạn trong css

đây là một ví dụ :

<meta name="viewport" content="width=device-width" />


<style>
     @media screen and (max-width:900px) {}
     @media screen and (min-width:900px) and (max-width:1200px) {}
     @media screen and (min-width:1200px) {}
</style>

<link rel="stylesheet" type="text/css" href="bootstrap.min.css">
<script type="text/javascript" src="css3-mediaqueries.js"></script>

Liên kết css đơn giản như dòng trên.

Hôm nay tôi đã có tình huống tương tự. Truy vấn phương tiện không hoạt động. Sau một thời gian, tôi thấy khoảng trống sau 'và' bị mất. Truy vấn phương tiện thích hợp sẽ trông như thế này:

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

Thứ tự tuần tự của mã css cũng có vấn đề, ví dụ:

@media(max-width:600px){
  .example-text{
     color:red;
   }
}
.example-text{
   color:blue;
}

đoạn mã trên sẽ không hoạt động vì lệnh được thực thi. Cần viết như sau

.example-text{
   color:blue;
}
@media(max-width:600px){
  .example-text{
     color:red;
   }
}

Luôn đề cập đến chiều rộng tối đa và chiều rộng tối thiểu trong một số đơn vị như px hoặc rem. Điều này đã tìm ra nó cho tôi. Nếu tôi viết nó mà không có đơn vị và chỉ có giá trị số, trình duyệt không thể đọc các truy vấn phương tiện. ví dụ: đây là màn hình chỉ @media sai và (max-width: 950) và đây là màn hình chỉ @media đúng và (max-width: 950px)

Ném một câu trả lời khác vào vòng. Nếu bạn đang cố gắng sử dụng các biến CSS, thì nó sẽ lặng lẽ thất bại.

@media screen and (max-device-width: var(--breakpoint-small)) {}

Các biến CSS không hoạt động trong các truy vấn phương tiện (theo thiết kế).

Lý do kỳ lạ mà tôi chưa từng thấy trước đây: Nếu bạn đang sử dụng bộ chọn "cha mẹ> con" bên ngoài truy vấn phương tiện (trong Firefox 69), nó có thể phá vỡ truy vấn phương tiện. Tôi không chắc tại sao điều này xảy ra, nhưng với kịch bản của tôi thì nó không hoạt động ...

@media whatever {
    #child { display: none; }
}

Nhưng việc thêm cha mẹ để phù hợp với một số CSS khác trên trang, điều này hoạt động ...

#parent > #child { display: none; }

Có vẻ như chỉ định cha mẹ không nên quan trọng, vì một id rất cụ thể và không nên có sự mơ hồ. Có lẽ đó là một lỗi trong Firefox?

Đoạn mã của OP rõ ràng sử dụng đánh dấu nhận xét chính xác nhưng CSS có thể phá vỡ theo cách lũy tiến - vì vậy, nếu có lỗi cú pháp, mọi thứ sau đó có khả năng bị lỗi. Một vài lần tôi đã dựa vào các nguồn đáng tin cậy cung cấp đánh dấu nhận xét không chính xác đã phá vỡ biểu định kiểu của tôi. Vì OP chỉ cung cấp một phần nhỏ trong mã của họ, nên tôi đề xuất như sau:

Đảm bảo tất cả các nhận xét CSS của bạn sử dụng đánh dấu này /*... */- đó là đánh dấu nhận xét chính xác cho css theo MDN

Xác thực css của bạn với một kẻ nói dối hoặc trình xác nhận trực tuyến an toàn. Đây là một của W3

Thông tin thêm: Tôi đã đi kiểm tra các điểm dừng truy vấn phương tiện được đề xuất mới nhất từ ​​bootstrap 4 và cuối cùng đã sao chép tấm nồi hơi trực tiếp từ tài liệu của họ. Hầu như mọi khối mã đều được gắn nhãn với các nhận xét kiểu javascript// , đã phá vỡ mã của tôi - và chỉ cung cấp cho tôi các lỗi biên dịch khó hiểu để khắc phục sự cố xảy ra trong đầu tôi và khiến tôi buồn.

Trình soạn thảo văn bản IntelliJ cho phép tôi nhận xét các dòng css cụ thể trong tệp LESS bằng cách sử dụng ctrl + / hotkey, ngoại trừ việc chèn //theo mặc định vào các loại tệp không được nhận dạng . Nó không phải là phần mềm miễn phí và ít phổ biến hơn nên tôi tin tưởng và sử dụng nó. Điều đó đã phá vỡ mã của tôi. Có một menu ưu tiên để dạy nó đánh dấu nhận xét chính xác cho mỗi loại tệp.

Bao gồm thẻ meta như bên dưới có thể khiến trình duyệt xử lý chế độ xem phóng to khác nhau.

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

Gần đây tôi cũng gặp phải vấn đề này và sau đó tôi phát hiện ra rằng đó là vì tôi đã không đặt một khoảng trống giữa andvà (. Đây là lỗi

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

Sau đó, tôi đã thay đổi nó để sửa nó

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

Tôi sử dụng một vài phương pháp tùy thuộc. Trong cùng một biểu định kiểu tôi sử dụng: @media (max-width: 450px) hoặc để riêng biệt, hãy đảm bảo bạn có liên kết chính xác trong tiêu đề. Tôi đã xem xét fixmeup của bạn và bạn có một loạt các liên kết đến css khó hiểu. Nó hoạt động như bạn nói cũng trên HTC mong muốn S.

@media all and (max-width:320px)and(min-width:0px) {
  #container {
    width: 100%;
  }
  sty {
    height: 50%;
    width: 100%;
    text-align: center;
    margin: 0;
  }
}

.username {
  margin-bottom: 20px;
  margin-top: 10px;
}

Đối với tôi, tôi đã chỉ định max-heightthay vìmax-width .

Nếu đó là bạn, hãy thay đổi nó!

    @media screen and (max-width: 350px) {    // Not max-height
        .letter{
            font-size:20px;
        }
    }

Nó cũng có thể xảy ra nếu mức thu phóng của trình duyệt không chính xác. Thu phóng cửa sổ trình duyệt của bạn phải là 100%. Trong Chrome sử dụng Ctrl + 0để đặt lại mức thu phóng.