แถบด้านข้างของธีม Wordpress ยี่สิบเอ็ดจัดการจัดเรียงลงที่ขนาดหน้าต่างบางขนาดด้วย CSS ได้อย่างไร

นี่คือตอนที่ธีมมีขนาดเต็ม:

ป้อนคำอธิบายรูปภาพที่นี่

ป้อนคำอธิบายรูปภาพที่นี่

เมื่อหน้าต่างของเบราว์เซอร์เล็กลง แถบด้านข้างจะเลื่อนไปที่ด้านล่างและเนื้อหาหลักจะครอบคลุมทั้งเลย์เอาต์:

ป้อนคำอธิบายรูปภาพที่นี่

ฉันคิดว่านี่คือ CSS ที่ใช้กลอุบาย:

}
#primary {
    float: left;
    margin: 0 -26.4% 0 0;
    width: 100%;
}
#content {
    border-top: 1px solid #444;
    margin: 0 34% 0 7.6%;
    padding: 20px 0 1.625em;
    width: 58.4%;
}
#secondary {
    float: right;
    margin-right: 7.6%;
    width: 18.8%;
}

(ไม่แน่ใจมาก)

นี่คือการสาธิตของธีม

แถบด้านข้างจัดการสแต็กดาวน์ที่ขนาดหน้าต่างบางขนาดด้วย CSS ได้อย่างไร (ปล่อยให้เนื้อหาหลักครอบครองพื้นที่ทั้งหมด)


wordpress css responsive-design
person alexchenco    schedule 03.09.2011    source แหล่งที่มา
comment
เนื่องจากเป็นธีมที่ลื่นไหล คุณสามารถอ่านเพิ่มเติมได้ที่นี่ว่าทำงานอย่างไร w3.org/TR/css3 -สื่อกลาง   -  person Side    schedule 03.09.2011
comment
@Side ฉันรู้ว่ามันเป็นเลย์เอาต์ที่ลื่นไหลและไม่ใช้สมาร์ทโฟนที่ใช้คำสั่งสื่อ ฉันต้องการทราบวิธีการ   -  person alexchenco    schedule 03.09.2011

คำตอบ (1)


arrow_upward
0
arrow_downward

สิ่งนี้เรียกว่าการออกแบบที่ตอบสนอง ตรวจสอบสิ่งนี้ - coding.smashingmagazine.com/2011/01 /12/guidelines-for-responsive-web-design/.

และในธีม WordPress ข้างต้นจะมีไฟล์ style.css ที่ลิงก์จาก https://s2.wp.com/wp-content/themes/pub/twentyeleven/style.css ในไฟล์นี้มีโค้ดที่ทำให้แถบด้านข้างซ้อนกันที่ขนาดหน้าต่างบางขนาด

@media (max-width:800px) {
  [...]
  #main #secondary {
    float:none;
    margin:0 7.6%;
    width:auto;
  }
  [...]
}

@media (max-width:800px) เป็นสิ่งที่ทำให้แถบด้านข้างปรับอัตโนมัติต่ำกว่าขนาดหน้าจอที่ระบุ ฉันหวังว่าคุณจะได้รับมัน

person CrazyFellow    schedule 22.03.2013