คำถามติดแท็ก responsive-design

เราจะจัดพื้นที่แบบสอบถามสื่ออย่างถูกต้องอย่างไรเพื่อหลีกเลี่ยงความซ้ำซ้อน ตัวอย่างเช่นหากเราพิจารณารหัส: @media (max-width: 20em) { /* for narrow viewport */ } @media (min-width: 20em) and (max-width: 45em) { /* slightly wider viewport */ } @media (min-width: 45em) { /* everything else */ } จะเกิดอะไรขึ้นในเบราว์เซอร์ที่รองรับทั้งหมดที่ 20em และ 45em? ฉันเคยเห็นคนใช้: สิ่งต่างๆเช่น 799px แล้ว 800px แต่ความกว้างของหน้าจอ 799.5 พิกเซลล่ะ? (เห็นได้ชัดว่าไม่ใช่บนจอแสดงผลทั่วไป แต่เป็นจอประสาทตา?) ฉันอยากรู้มากที่สุดเกี่ยวกับคำตอบที่นี่เมื่อพิจารณาจากข้อมูลจำเพาะ

90 css  responsive-design  media-queries 

เนื่องจาก Bootstrap 3 ไม่มีไฟล์แยกต่างหากสำหรับสไตล์ชีตที่ตอบสนองและมาตรฐานอีกต่อไป ดังนั้นฉันจะลบคุณสมบัติที่ตอบสนองได้อย่างง่ายดายได้อย่างไร

85 twitter-bootstrap  responsive-design  media-queries  twitter-bootstrap-3 

จะทำให้ iframe ตอบสนองได้อย่างไรโดยไม่ต้องสมมติอัตราส่วนกว้างยาว? ตัวอย่างเช่นเนื้อหาอาจมีความกว้างหรือความสูงซึ่งไม่เป็นที่รู้จักก่อนแสดงผล หมายเหตุคุณสามารถใช้ Javascript ตัวอย่าง: <div id="iframe-container"> <iframe/> </div> ปรับขนาดนี้iframe-containerเพื่อให้เนื้อหาของมันพอดีกับภายในโดยไม่มีพื้นที่เพิ่มเติมกล่าวคือมีพื้นที่ว่างเพียงพอสำหรับเนื้อหาจึงสามารถแสดงได้โดยไม่ต้องเลื่อน แต่ไม่มีพื้นที่มากเกินไป คอนเทนเนอร์ล้อม iframe อย่างสมบูรณ์ สิ่งนี้แสดงวิธีการตอบสนอง iframe โดยสมมติว่าอัตราส่วนภาพของเนื้อหาคือ 16: 9 แต่ในคำถามนี้อัตราส่วนภาพแปรผัน

14 javascript  html  css  iframe  responsive-design 

ฉันมีปัญหาจริงบางประการในการพยายามทำให้แถบด้านข้าง / เนื้อหาการนำทางของฉัน (โดยใช้ Bootstrap) เพื่อแสดง (ขยาย) ตามค่าเริ่มต้นบนเดสก์ท็อปและปิดโดยค่าเริ่มต้นบนมือถือและมีไอคอนแสดงบนมือถือเท่านั้น ฉันไม่สามารถทำงานนี้ได้ <nav class="menu menu-open" id="theMenu"> <div class="menu-wrap"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"> <i class="fa fa-bars menu-close d-lg-none" id="menu-toggle"></i> </button> <div id="menu-logo"> <img src="Final_Logo.png" width="210" height="214" alt=""> </div> <div id="navbarToggleExternalContent"> <ul id="main-menu"> <a href="#">Home</a> <a href="#">About</a> <a href="#">Writing</a> <a …

9 javascript  html  css  bootstrap-4  responsive-design