หน้าจอ @media และ (ความกว้างสูงสุด: 1024px) หมายถึงอะไรใน CSS

ฉันพบรหัสชิ้นนี้ในไฟล์ CSS ที่ฉันสืบทอด แต่ฉันไม่สามารถเข้าใจได้:

@media screen and (max-width: 1024px){
    img.bg {
        left: 50%;
        margin-left: -512px; }
}

โดยเฉพาะสิ่งที่เกิดขึ้นในบรรทัดแรก

นั่นคือแบบสอบถามสื่อ มันป้องกันไม่ให้ CSS ที่อยู่ภายในถูกเรียกใช้ยกเว้นว่าเบราว์เซอร์ผ่านการทดสอบที่มีอยู่

การทดสอบในแบบสอบถามสื่อนี้คือ:

1. @media screen- เบราว์เซอร์ระบุว่าอยู่ในหมวดหมู่ "หน้าจอ" นี้ประมาณหมายความว่าเบราว์เซอร์คิดว่าตัวเองเดสก์ทอประดับ - เมื่อเทียบกับ e กรัมเก่าเบราว์เซอร์โทรศัพท์มือถือ (หมายเหตุว่า iPhone และมาร์ทโฟนเบราว์เซอร์อื่น ๆ ที่จะพิสูจน์ตัวเองว่าอยู่ในหมวดหมู่ของหน้าจอ) หรือหน้าจอ - และว่ามันแสดง หน้าบนหน้าจอแทนที่จะพิมพ์

2. max-width: 1024px- ความกว้างของหน้าต่างเบราว์เซอร์ (รวมถึงแถบเลื่อน) คือ 1024 พิกเซลหรือน้อยกว่า ( พิกเซล CSS ไม่ใช่พิกเซลอุปกรณ์ )

การทดสอบครั้งที่สองแสดงให้เห็นว่าสิ่งนี้มีวัตถุประสงค์เพื่อ จำกัด CSS เป็น iPad, iPhone และอุปกรณ์ที่คล้ายกัน (เนื่องจากเบราว์เซอร์รุ่นเก่าบางรุ่นไม่รองรับการmax-widthสืบค้นสื่อและเบราว์เซอร์เดสก์ท็อปจำนวนมากทำงานได้กว้างกว่า 1024 พิกเซล)

อย่างไรก็ตามจะใช้กับหน้าต่างเบราว์เซอร์เดสก์ท็อปที่มีความกว้างน้อยกว่า 1024 พิกเซลในเบราว์เซอร์ที่รองรับการmax-widthสืบค้นสื่อ

นี่คือข้อมูลจำเพาะของ Media Queries สามารถอ่านได้:

• http://www.w3.org/TR/css3-mediaqueries/

มัน จำกัด สไตล์ที่กำหนดไว้ที่หน้าจอ (เช่นไม่พิมพ์หรือสื่ออื่น ๆ ) และเป็นการ จำกัด ขอบเขตของวิวพอร์ตที่มีความกว้าง 1024px หรือน้อยกว่า

http://www.css3.info/preview/media-queries/

มันบอกว่า: เมื่อหน้าแสดงผลบนหน้าจอที่ความละเอียดสูงสุด 1024 พิกเซลแล้วใช้กฎที่ตามมา

ตามที่คุณอาจทราบแล้วว่าในความเป็นจริงคุณสามารถกำหนดเป้าหมาย CSS เป็นประเภทสื่อที่อาจเป็นหนึ่งในอุปกรณ์พกพาหน้าจอเครื่องพิมพ์และอื่น ๆ

ดูรายละเอียดได้ที่นี่ ..

ในกรณีของฉันฉันต้องการจัดโลโก้ของฉันไว้ที่เว็บไซต์เมื่อเบราว์เซอร์มี800pxหรือน้อยกว่าฉันก็ทำได้โดยใช้@mediaแท็ก:

@media screen and (max-width: 800px) {
  #logo {
    float: none;
    margin: 0;
    text-align: center;
    display: block;
    width: auto;
  }
}

มันใช้งานได้สำหรับฉันหวังว่าจะมีใครบางคนหาวิธีแก้ปัญหานี้มีประโยชน์ :) สำหรับข้อมูลเพิ่มเติมโปรดดูที่นี้

นั่นเป็นสื่อแบบสอบถาม อนุญาตให้คุณใช้กฎ CSS บางส่วนกับอุปกรณ์เฉพาะในการกำหนดค่าเฉพาะ

หมายความว่าหากขนาดหน้าจอ 1024 แล้วจะใช้เฉพาะกฎ CSS ด้านล่างเท่านั้น

หากเงื่อนไขการสืบค้นสื่อของคุณเป็นจริง CSS ของคุณที่มีเงื่อนไขนั้นจะทำงาน นั่นหมายความว่า CSS ภายในขนาดพิกเซลเงื่อนไขการสืบค้นสื่อของคุณจะมีผลหรือไม่เช่นนั้นหากเงื่อนไขจะล้มเหลวนั่นหมายความว่าหากความกว้างของอุปกรณ์มากกว่า 1024px กว่า CSS ของคุณจะไม่ทำงานเนื่องจากเงื่อนไขการสืบค้นสื่อเป็นเท็จ

max-width ขีด จำกัด สูงสุดของ CSS จนถึงความกว้างนั้น

นอกจากนี้ยังมีข้อสังเกตว่าคุณสามารถใช้ 'em' และ 'px' - บล็อกและไซต์ที่เป็นข้อความได้เนื่องจากเบราว์เซอร์ทำการตัดสินใจเลย์เอาต์ที่สัมพันธ์กับเนื้อหาข้อความมากขึ้น

ใน Wordpress twentysixteen ฉันต้องการให้สโลแกนของฉันแสดงบนโทรศัพท์มือถือและเดสก์ท็อปดังนั้นฉันจึงวางสิ่งนี้ไว้ในธีมลูกของฉัน style.css

@media screen and (max-width:59em){
    p.site-description {
        display:    block;
    }
}

มันกำหนดคุณสมบัติบางอย่างที่ระบุเพื่อรันโค้ดอื่น ...

ตัวอย่างเช่น:

@media all and (max-width: 600px) {
  .navigation {
    -webkit-flex-flow: column wrap;
    flex-flow: column wrap;
    padding: 0;

  }

ตัวอย่างด้านบนบอกว่าอุปกรณ์ที่รันโปรแกรมนี้มีหน้าจอที่มีความกว้าง 600px หรือน้อยกว่า 600px ในกรณีนี้โปรแกรมของเราจะต้องเรียกใช้ส่วนนี้