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

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

139 twitter-bootstrap  user-interface  twitter-bootstrap-3  responsive-design  bootstrap-4 

ฉันต้องการสร้างเพจที่ตอบสนองโดยใช้ bootstrap โดยวางตำแหน่ง div ที่กึ่งกลางของเพจดังเช่นในรูปแบบที่กล่าวถึงด้านล่าง

139 css  twitter-bootstrap  responsive-design 

ฉันมีรหัสต่อไปนี้ซึ่งตั้งค่าคอนเทนเนอร์ที่มีความสูงที่เปลี่ยนแปลงตามความกว้างเมื่อเบราว์เซอร์มีขนาดใหม่ (เพื่อรักษาอัตราส่วนภาพสี่เหลี่ยมจัตุรัส) HTML <div class="responsive-container"> <div class="dummy"></div> <div class="img-container"> <IMG HERE> </div> </div> CSS .responsive-container { position: relative; width: 100%; border: 1px solid black; } .dummy { padding-top: 100%; /* forces 1:1 aspect ratio */ } .img-container { position: absolute; top: 0; bottom: 0; left: 0; right: 0; } ฉันจะจัดแนว …

135 html  css  responsive-design  vertical-alignment 

iPhone 5 มีหน้าจอที่ยาวขึ้นและไม่ดึงดูดมุมมองบนมือถือของเว็บไซต์ของฉัน คำถามเกี่ยวกับการออกแบบที่ตอบสนองใหม่สำหรับ iPhone 5 คืออะไรและฉันสามารถรวมกับคำค้นหาของ iPhone ที่มีอยู่ได้หรือไม่ ข้อความค้นหาสื่อปัจจุบันของฉันคือ: @media only screen and (max-device-width: 480px) {}

132 iphone  css  responsive-design  media-queries  iphone-5 

ฉันมีวิดีโอ YouTube ที่ฝังอยู่ในเว็บไซต์ของเราและเมื่อฉันย่อขนาดหน้าจอเป็นขนาดแท็บเล็ตหรือโทรศัพท์มันจะหยุดหดที่ความกว้างประมาณ 560px นี่เป็นมาตรฐานสำหรับวิดีโอ YouTube หรือมีอะไรที่ฉันสามารถเพิ่มรหัสเพื่อให้เล็กลงได้ไหม

125 youtube  responsive-design  embed 

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

122 html  css  responsive-design  aspect-ratio 

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

117 mobile  web  responsive-design 

เป้าหมายคือให้<svg>องค์ประกอบขยายถึงขนาดของคอนเทนเนอร์ระดับบนสุดในกรณีนี้<div>คือไม่ว่าคอนเทนเนอร์นั้นจะใหญ่หรือเล็กเพียงใด รหัส: <style> svg, #container{ height: 100%; width: 100%; } </style> <div id="container"> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" > <rect x="0" y="0" width="100" height="100" /> </svg> </div> วิธีแก้ปัญหาที่พบบ่อยที่สุดสำหรับปัญหานี้คือการตั้งค่าviewBoxแอตทริบิวต์ใน<svg>องค์ประกอบ viewBox="0 0 widthOfContainer heightOfContainer" อย่างไรก็ตามสิ่งนี้ดูเหมือนจะใช้ไม่ได้ในกรณีที่องค์ประกอบภายใน<svg>องค์ประกอบมีความกว้างและ / หรือความสูงที่กำหนดไว้ล่วงหน้า ตัวอย่างเช่น<rect>องค์ประกอบในโค้ดด้านบนมีการกำหนดความกว้างและความสูงไว้อย่างชัดเจน ดังนั้นวิธีแก้ปัญหาที่ชัดเจนคือการใช้% widths และ% height กับองค์ประกอบเหล่านั้นด้วย แต่สิ่งนี้ต้องทำหรือไม่? โดยเฉพาะอย่างยิ่งเนื่องจาก<img src=test.svg >ทำงานได้ดีและขยาย / สัญญาโดยไม่มีปัญหาใด ๆ กับ<rect>ความสูงและความกว้างที่ตั้งไว้อย่างชัดเจน หากองค์ประกอบเช่น<rect>และองค์ประกอบอื่น ๆ เช่นนั้นจะต้องมีความกว้างและความสูงกำหนดไว้เป็นเปอร์เซ็นต์มีวิธีใดบ้างใน …

112 css  html  svg  responsive-design 

ฉันต้องการเพิ่มคุณสมบัติการออกแบบที่ตอบสนองให้กับเว็บแอปพลิเคชันของฉันโดยใช้ Twitter Bootstrap ฉันแค่ต้องการพฤติกรรมที่ตอบสนองฉันไม่สนใจตัวอักษรส่วนประกอบหรือสิ่งอื่นใดที่รวมอยู่ใน Bootstrap ฉันได้รับBootstrap เวอร์ชันที่กำหนดเองเพียงแค่เลือกระบบกริด อย่างไรก็ตามเมื่อฉันเพิ่ม CSS ที่สร้างขึ้นในแอปพลิเคชันของฉันสไตล์ทั้งหมดของฉันจะยุ่งเหยิง (ส่วนหัวลิงก์และอื่น ๆ ) เหตุใดจึงเกิดขึ้น ฉันจะรับ Bootstrap CSS ด้วยระบบกริดได้อย่างไร ฉันต้องการหลีกเลี่ยงการแก้ไขไฟล์ Bootstrap ด้วยตนเอง

109 html  css  twitter-bootstrap  responsive-design 

เนื่องจาก Twitter Bootstrap ได้รับการออกแบบให้ตอบสนอง / เป็นมิตรกับอุปกรณ์เหตุใดจึงไม่ใช้ขนาดตัวอักษรที่สัมพันธ์กัน

104 twitter-bootstrap  mobile  fonts  responsive-design  font-size 

นี่อาจฟังดูเป็นคำถามโง่ ๆ ถ้าฉันใช้ตัวอย่าง CSS นี้สำหรับการแสดงผลปกติ ( box-bg.png200px คูณ 200px อยู่ที่ไหน); .box{ background:url('images/box-bg.png') no-repeat top left; width:200px; height:200px } และถ้าฉันใช้แบบสอบถามสื่อเช่นนี้เพื่อกำหนดเป้าหมายการแสดงเรตินา (โดยที่ภาพ @ 2x เป็นเวอร์ชันความละเอียดสูง) @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .box{background:url('images/box-bg@2x.png') no-repeat top left;} } ฉันต้องเพิ่มขนาด.boxdiv เป็นสองเท่าเป็น400px คูณ 400px เพื่อให้ตรงกับภาพพื้นหลังความละเอียดสูงใหม่หรือไม่

102 css  responsive-design  media-queries 

ฉันกำลังพยายามสร้างรูปร่างเหมือนในภาพด้านล่างโดยมีขอบเอียงเพียงด้านเดียว (เช่นด้านล่าง) ในขณะที่ขอบอีกด้านยังคงตรง ฉันลองใช้วิธีการเส้นขอบ (ระบุรหัสด้านล่าง) แต่ขนาดของรูปร่างของฉันเป็นแบบไดนามิกดังนั้นฉันจึงไม่สามารถใช้วิธีนี้ได้ .shape { position: relative; height: 100px; width: 200px; background: tomato; } .shape:after { position: absolute; content: ''; height: 0px; width: 0px; left: 0px; bottom: -100px; border-width: 50px 100px; border-style: solid; border-color: tomato tomato transparent transparent; } <div class="shape"> Some content </div> เรียกใช้ข้อมูลโค้ดซ่อนผลลัพธ์ขยายข้อมูลโค้ด ฉันได้ลองใช้การไล่ระดับสีสำหรับพื้นหลังด้วย (เช่นในโค้ดด้านล่าง) …

93 html  css  responsive-design  css-shapes 

ฉันมีรหัสนี้: <footer class="row"> <nav class="col-sm-3"> <ul class="list-unstyled"> <li>Text 1</li> <li>Text 2</li> <li>Text 3</li> </ul> </nav> <nav class="col-sm-3"> <ul class="list-unstyled"> <li>Text 4</li> <li>Text 5</li> <li>Text 6</li> </ul> </nav> <nav class="col-sm-3"> <ul class="list-unstyled"> <li>Text 7</li> <li>Text 8</li> <li>Text 9</li> </ul> </nav> <nav class="col-sm-3"> <ul class="list-unstyled"> <li>Text 10</li> <li>Text 11</li> <li>Text 12</li> </ul> …

92 html  css  twitter-bootstrap  twitter-bootstrap-3  responsive-design 

ขณะนี้ฉันมีสิ่งที่ต้องการ: <div class="row"> <div class="col-md-4">Content</div> <div class="col-md-4">Content</div> <div class="col-md-4">Content</div> <div class="col-md-4">Content</div> <div class="col-md-4">Content</div> <div class="col-md-4">Content</div> <div class="col-md-4">Content</div> <div class="col-md-4">Content</div> <div class="col-md-4">Content</div> </div> ตอนนี้สมมติว่าcontentเป็นกล่องที่มีความสูงต่างกันโดยมีความกว้างเท่ากันทั้งหมด - ฉันจะรักษา "เค้าโครงตามตาราง" เดียวกันได้อย่างไรและยังมีกล่องทั้งหมดเรียงกันอยู่ใต้กันและกันแทนที่จะเป็นเส้นที่สมบูรณ์แบบ ปัจจุบัน TWBS จะวางบรรทัดถัดไปของcol-md-4องค์ประกอบที่ยาวที่สุดในแถวที่สามก่อนหน้าดังนั้นแต่ละแถวของรายการจึงถูกจัดวางอย่างสมบูรณ์แบบในขณะที่สิ่งนี้ยอดเยี่ยมฉันต้องการให้แต่ละรายการอยู่ภายใต้องค์ประกอบสุดท้ายโดยตรง (เลย์เอาต์ "ก่ออิฐ" )

91 html  css  twitter-bootstrap  responsive-design  bootstrap-4 

แก้ไข: บางทีฉันควรถามว่าตัวเลือกใดตั้งค่าช่องว่างด้านข้างเมื่อหน้าจอลดลงต่ำกว่าความกว้าง 480px? ฉันเรียกดู bootstrap-responsiveness.css มาระยะหนึ่งแล้วเพื่อค้นหาสิ่งนี้ แต่ดูเหมือนจะไม่มีผลกับสิ่งนี้ เดิม โดยทั่วไปแล้วฉันต้องการลบการเว้นระยะห่างเริ่มต้นหรือการตั้งค่าระยะขอบสำหรับการตอบสนองบนหน้าจออุปกรณ์ขนาดเล็ก ฉันมีbackground colorทับบนcontainer-fluidตัวเลือกและหน้าจอขนาดใหญ่ทำให้พวกเขาได้อย่างสมบูรณ์แบบ 100% ตามความกว้างหน้าจอ แต่พวกเขาจะลดลงไปขนาดที่เล็กลงตามค่าเริ่มต้น Bootstrap ดูเหมือนว่าจะเพิ่มอัตรากำไรขั้นต้นหรือขยายบนหรือcontainer-fluidcontainer <div class="container-fluid"> <div class="row-fluid"> test </div> </div> หากฉันใช้ css ที่กำหนดเองเพื่อเขียนทับสไตล์เริ่มต้นของ Bootstrap ฉันควรเขียนทับคิวรีสื่อหรือตัวเลือกใดเพื่อลบช่องว่างภายในนี้บนหน้าจอขนาดเล็ก

90 css  twitter-bootstrap  responsive-design  media-queries