เหตุใดข้อความค้นหาสื่อ CSS3 ของฉันจึงไม่ทำงาน

ใน styles.css ฉันใช้คิวรีสื่อซึ่งทั้งคู่ใช้รูปแบบของ:

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

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

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

ไซต์ปรับขนาดเป็นเลย์เอาต์ที่ฉันต้องการในเบราว์เซอร์ปกติ (Safari, Firefox) เมื่อฉันย่อขนาดหน้าต่างอย่างไรก็ตามเลย์เอาต์มือถือไม่แสดงเลยบนโทรศัพท์ แต่ฉันเพิ่งเห็น CSS เริ่มต้น

ใครช่วยชี้ฉันในทิศทางที่ถูกต้องได้ไหม

ทั้งสามข้อนี้เป็นเคล็ดลับที่มีประโยชน์ แต่ดูเหมือนว่าฉันต้องการเพิ่มเมตาแท็ก:

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

ตอนนี้ดูเหมือนว่าจะทำงานได้ทั้งใน Android (2.2) และ iPhone ทั้งหมด ...

อย่าลืมที่จะมีการประกาศ css มาตรฐานเหนือแบบสอบถามสื่อหรือแบบสอบถามจะไม่ทำงานอย่างใดอย่างหนึ่ง

.edcar_letter{
    font-size:180px;
}

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

ฉันสงสัยว่าคำหลักonlyอาจเป็นปัญหาที่นี่ ฉันไม่มีปัญหาในการใช้คำสั่งสื่อเช่นนี้:

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

ฉันใช้ bootstrap ในเว็บไซต์กด แต่ไม่ทำงานบน IE8 ฉันใช้ javascript css3-mediaqueries.js แต่ก็ยังไม่ทำงาน หากคุณต้องการให้คิวรีสื่อของคุณทำงานกับไฟล์จาวาสคริปต์นี้เพิ่มหน้าจอในบรรทัดคิวรีสื่อของคุณใน css

นี่คือตัวอย่าง:

<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>

css ลิงก์บรรทัดง่ายๆเหมือนบรรทัดข้างบน

วันนี้ฉันมีสถานการณ์ที่คล้ายกัน ข้อความค้นหาสื่อไม่ทำงาน หลังจากที่ในขณะที่ฉันพบว่าพื้นที่หลังจาก 'และ' หายไป ข้อความค้นหาสื่อที่เหมาะสมควรมีลักษณะดังนี้:

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

ลำดับของรหัส css นั้นมีความสำคัญเช่น:

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

รหัสข้างต้นจะไม่ทำงานเพราะคำสั่งดำเนินการ ต้องเขียนดังนี้:

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

พูดถึงความกว้างสูงสุดและความกว้างต่ำสุดในบางหน่วยเช่น px หรือ rem นี้คิดออกสำหรับฉัน ถ้าฉันเขียนโดยไม่มีหน่วยและมีเพียงค่าตัวเลขเบราว์เซอร์ไม่สามารถอ่านข้อความค้นหาสื่อ ตัวอย่าง: นี่เป็น หน้าจอ @media เท่านั้นที่ไม่ถูกต้องและ (ความกว้างสูงสุด: 950) และ นี่คือ หน้าจอ @media ที่ถูกต้องเท่านั้นและ (ความกว้างสูงสุด: 950px)

โยนคำตอบอื่นลงในวงแหวน หากคุณพยายามใช้ตัวแปร CSS มันจะล้มเหลวอย่างเงียบ ๆ

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

ตัวแปร CSS ไม่ทำงานในการสืบค้นสื่อ (โดยการออกแบบ)

เหตุผลแปลก ๆ ที่ฉันไม่เคยเห็นมาก่อน: หากคุณใช้ตัวเลือก "parent> child" นอกการสืบค้นสื่อ (ใน Firefox 69) อาจทำให้การสืบค้นสื่อหยุดลง ฉันไม่แน่ใจว่าทำไมสิ่งนี้ถึงเกิดขึ้น แต่สำหรับสถานการณ์ของฉันสิ่งนี้ไม่ทำงาน ...

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

แต่การเพิ่มพาเรนต์เพื่อให้ตรงกับ CSS อื่น ๆ เพิ่มเติมในหน้านี้ได้ผล ...

#parent > #child { display: none; }

ดูเหมือนว่าการระบุผู้ปกครองไม่ควรมีความสำคัญเนื่องจากรหัสมีความเฉพาะเจาะจงมากและไม่ควรคลุมเครือ อาจเป็นข้อบกพร่องใน Firefox ใช่ไหม

ข้อมูลโค้ดของ OP ใช้เครื่องหมายความคิดเห็นที่ถูกต้องอย่างชัดเจน แต่ CSS สามารถทำลายในแบบก้าวหน้าดังนั้นหากมีข้อผิดพลาดทางไวยากรณ์ทุกอย่างหลังจากนั้นอาจจะล้มเหลว สองสามครั้งที่ฉันพึ่งพาแหล่งข้อมูลที่น่าเชื่อถือซึ่งให้มาร์กอัปความคิดเห็นที่ไม่ถูกต้องซึ่งทำให้สไตล์ชีตของฉันเสียหาย เนื่องจาก OP ระบุเพียงส่วนเล็ก ๆ ของรหัสฉันจึงแนะนำสิ่งต่อไปนี้:

ตรวจสอบให้แน่ใจว่าความคิดเห็น CSS ทั้งหมดของคุณใช้มาร์กอัพนี้/*... */- ซึ่งเป็นมาร์กอัพข้อคิดเห็นที่ถูกต้องสำหรับ css ตาม MDN

ตรวจสอบ css ของคุณด้วย linter หรือตัวตรวจสอบความปลอดภัยออนไลน์ นี่คือหนึ่งโดย W3

ข้อมูลเพิ่มเติม: ฉันไปตรวจสอบจุดพักการสืบค้นสื่อที่แนะนำล่าสุดจาก bootstrap 4 และสิ้นสุดการคัดลอกแผ่นหม้อน้ำตรงจากเอกสารของพวกเขา โค้ดบล็อกเกือบทุกตัวมีป้ายกำกับด้วยความคิดเห็นสไตล์จาวาสคริปต์//ซึ่งทำให้รหัสของฉันเสียหายและทำให้ฉันมีข้อผิดพลาดในการคอมไพล์ที่เข้ารหัสเพื่อแก้ไขปัญหาเท่านั้นซึ่งทำให้ฉันปวดหัวในเวลานั้น

แก้ไขข้อความ IntelliJ อนุญาตให้ฉันจะแสดงความคิดเห็นออกเส้นที่เฉพาะเจาะจงของ CSS ในไฟล์น้อยโดยการกด Ctrl + / ฮอตซึ่งเป็นดียกเว้นมันแทรก//โดยเริ่มต้นในประเภทไฟล์ที่ไม่รู้จัก มันไม่ได้เป็นฟรีแวร์และเป็นกระแสหลักน้อยดังนั้นฉันจึงไว้ใจและไปกับมัน นั่นทำให้รหัสของฉันพัง มีเมนูการตั้งค่าสำหรับการสอนมาร์กอัปความคิดเห็นที่ถูกต้องสำหรับแต่ละประเภทไฟล์

การรวมเมตาแท็กแบบด้านล่างอาจทำให้เบราว์เซอร์จัดการการซูมวิวพอร์ตแตกต่างกัน

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

ผมพบปัญหานี้เมื่อเร็ว ๆ นี้เช่นกันและผมก็มาพบภายหลังว่ามันเป็นเพราะฉันไม่ได้ใส่ช่องว่างระหว่างและand (นี่เป็นข้อผิดพลาด

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

จากนั้นฉันเปลี่ยนเป็นสิ่งนี้เพื่อแก้ไข

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

ฉันใช้สองสามวิธีขึ้นอยู่กับ ในสไตล์ชีทเดียวกันฉันใช้: @media (ความกว้างสูงสุด: 450px) หรือแยกกันตรวจสอบให้แน่ใจว่าคุณมีลิงก์ในส่วนหัวอย่างถูกต้อง ฉันได้ดูที่ fixmeup ของคุณและคุณมีลิงก์ที่เชื่อมโยงไปยัง css ที่สับสน มันทำหน้าที่ตามที่คุณพูดด้วย HTC ปรารถนา 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;
}

สำหรับฉันฉันได้ระบุmax-heightแทนmax-widthแทน

ถ้านั่นคือคุณไปเปลี่ยนมัน!

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

มันอาจเกิดขึ้นหากระดับการซูมของเบราว์เซอร์ไม่ถูกต้อง การซูมหน้าต่างเบราว์เซอร์ของคุณควรเป็น 100% ใน Chrome ใช้Ctrl + 0เพื่อรีเซ็ตระดับการซูม