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

ฉันมีปัญหาในการปรับขนาดตัวอักษร ขณะนี้ฉันมีเว็บไซต์นี้ที่มีเนื้อหาfont-size100% 100% ของสิ่งที่คิดว่า? ดูเหมือนว่าจะคำนวณด้วยความละเอียด 16 พิกเซล ฉันรู้สึกว่า 100% จะอ้างถึงขนาดของหน้าต่างเบราว์เซอร์ แต่อย่างใด แต่ไม่ใช่เพราะมันเป็น 16 พิกเซลเสมอไม่ว่าจะเป็นการปรับขนาดหน้าต่างให้เป็นความกว้างของมือถือหรือเดสก์ท็อปแบบจอกว้างเต็มจอ ฉันจะทำให้ข้อความในระดับไซต์ของฉันสัมพันธ์กับที่เก็บได้อย่างไร ฉันลองใช้emแต่ก็ไม่ได้ปรับขนาดเหมือนกัน เหตุผลของฉันคือสิ่งต่าง ๆ เช่นเมนูของฉันกลายเป็น squished เมื่อคุณปรับขนาดดังนั้นฉันจำเป็นต้องลดpx font-sizeจำนวนของ.menuItemองค์ประกอบอื่น ๆ ที่เกี่ยวข้องกับความกว้างของภาชนะ (ตัวอย่างเช่นในเมนูบนเดสก์ท็อปขนาดใหญ่22pxทำงานได้อย่างสมบูรณ์แบบเลื่อนลงไปที่ความกว้างแท็บเล็ตและ16pxเหมาะสมกว่า) ฉันรู้ว่าฉันสามารถเพิ่มเบรกพอยต์ได้ แต่ฉันต้องการให้ข้อความขยายขนาดและมีเบรกพอยต์เป็นพิเศษมิฉะนั้นฉันจะจบด้วยเบรกพอยต์หลายร้อยตัวสำหรับความกว้างลดลง 100pixels ทุกครั้งเพื่อควบคุมข้อความ

1186 css  responsive-design  font-size 

ฉันต้องการสร้าง divที่สามารถเปลี่ยนความกว้าง / ความสูงได้เมื่อความกว้างของหน้าต่างเปลี่ยนไป มีกฎ CSS3 ใด ๆ ที่จะช่วยให้ความสูงในการเปลี่ยนแปลงตามความกว้างในขณะที่รักษาอัตราส่วน ? ฉันรู้ว่าฉันสามารถทำได้ผ่าน JavaScript แต่ฉันต้องการใช้ CSS เท่านั้น

1058 html  css  responsive-design  aspect-ratio 

อะไรคือความแตกต่างในหมู่col-lg-*, col-md-*และcol-sm-*ในเงินทุน Twitter?

544 css  twitter-bootstrap  twitter-bootstrap-3  responsive-design  bootstrap-4 

ฉันสับสนเกี่ยวกับตัวเลือกต่าง ๆ ในตาราง bootstrap twitterและวิธีที่พวกเขาไปด้วยกัน จะเริ่มต้นด้วยคุณสามารถมีสามัญคงที่หรือcontainercontainer-fluid จากนั้นคนใดคนหนึ่งสามารถรวมทั้งสามัญหรือแถวของเหลวrow row-fluidนั่นคือคุณสามารถมีภาชนะคงที่ที่มีแถวของไหลหรือภาชนะของของไหล ... กับแถวคงที่หรือไม่? จากนั้นคุณสามารถรวมข้อความค้นหาสื่อ 'ตอบสนอง' หรือไม่ก็ได้ ฉันสับสนว่าสิ่งเหล่านี้มีปฏิกิริยาต่อกันอย่างไร แต่ขอเริ่มด้วยตัวอย่างที่ชัดเจน ในหน้าตัวอย่างนั้นมีสิ่งที่แสดงเป็นตัวอย่างของทั้งกริดคงที่และกริดฟลูอิด อย่างไรก็ตามในเบราว์เซอร์ของฉันในหน้าตัวอย่างนั้น - กริดทั้งสองทำงานเหมือนกัน อาจเป็นเพราะหน้าตัวอย่างใช้คิวรีสื่อที่ตอบสนองต่อการเลือกหรือไม่ ในตัวอย่างกริดทั้งสองถ้าฉันเริ่มค่อยๆลดขนาดหน้าต่างเบราว์เซอร์ของฉันองค์ประกอบกริดจะไม่แคบลงเรื่อย ๆ เมื่อถึงความกว้างของขอบเขตที่แน่นอน (ตอบสนอง) พวกมันจะมีขนาดเล็กลง แต่ทั้งสองตัวอย่าง 'คงที่' ธรรมดาและตัวอย่าง 'ของเหลว' ทำตัวเหมือนกันตรงนี้ - แล้วห่าอะไรคือความแตกต่าง?

399 twitter-bootstrap  responsive-design  fluid-layout  fixed-width 

ฉันสร้างเว็บไซต์โดยใช้ตารางZurb Foundation 3 แต่ละหน้ามีขนาดใหญ่h1: body { font-size: 100% } /* Headers */ h1 { font-size: 6.2em; font-weight: 500; } <div class="row"> <div class="twelve columns text-center"> <h1> LARGE HEADER TAGLINE </h1> </div> <!-- End Tagline --> </div> <!-- End Row --> เรียกใช้ข้อมูลโค้ดซ่อนผลลัพธ์ขยายตัวอย่างข้อมูล เมื่อฉันปรับขนาดเบราว์เซอร์เป็นขนาดมือถือตัวอักษรขนาดใหญ่จะไม่ปรับและทำให้เบราว์เซอร์รวมการเลื่อนแนวนอนเพื่อรองรับข้อความขนาดใหญ่ ฉันสังเกตเห็นว่าในหน้าตัวอย่างZurb Foundation 3 Typography ส่วนหัวปรับให้เข้ากับเบราว์เซอร์เนื่องจากมีการบีบอัดและขยาย ฉันขาดอะไรบางอย่างที่ชัดเจนจริง ๆ ? …

343 css  responsive-design  font-size  zurb-foundation  em 

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

336 css  responsive-design 

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

298 html  css  twitter-bootstrap  responsive-design 

ฉันต้องการปุ่มที่จะใช้ความกว้างเต็มของคอลัมน์ แต่มีปัญหา ... <div class="span9 btn-block"> <button class="btn btn-large btn-block btn-primary" type="button">Block level button</button> </div> ฉันจะทำให้ปุ่มกว้างเท่ากับคอลัมน์ได้อย่างไร

276 css  twitter-bootstrap  html  responsive-design 

สมมติว่าฉันมีสคริปต์ฮิสโตแกรมที่สร้างกราฟิก 960 500 svg ฉันจะทำให้การตอบสนองนี้ปรับขนาดความกว้างและความสูงของกราฟิกเป็นแบบไดนามิกได้อย่างไร <script> var n = 10000, // number of trials m = 10, // number of random variables data = []; // Generate an Irwin-Hall distribution. for (var i = 0; i < n; i++) { for (var s = 0, j = 0; j < …

224 javascript  responsive-design  d3.js 

ปัจจุบันเมื่อความกว้างของเบราว์เซอร์ลดลงต่ำกว่า 768px แถบนำทางจะเปลี่ยนเป็นโหมดยุบตัว ฉันต้องการเปลี่ยนความกว้างนี้เป็น 1,000px ดังนั้นเมื่อเบราว์เซอร์ต่ำกว่า 1,000px แถบนำทางจะเปลี่ยนเป็นโหมดยุบ ฉันต้องการทำสิ่งนี้โดยไม่ใช้ LESS ฉันใช้สไตลัสไม่ใช่ LESS ปัญหาของฉันเหมือนกับคำถามนี้: Bootstrap 3 Navbar ยุบ แต่คำตอบทั้งหมดในคำถามนั้นจะอธิบายวิธีการทำโดยการเปลี่ยนตัวแปร LESS ฉันไม่ได้ติดต่อกับน้อยฉันใช้สไตลัสดังนั้นฉันต้องการทราบว่าวิธีนี้สามารถทำได้โดยใช้สไตลัสหรือวิธีอื่น ขอบคุณ!

205 css  twitter-bootstrap  responsive-design  navbar  collapse 

ฉันมีเว็บไซต์ (g-floors.eu) และฉันต้องการสร้างพื้นหลัง (ใน css ฉันได้กำหนด bg-image สำหรับเนื้อหา) เช่นกัน น่าเสียดายที่ฉันไม่มีความคิดเกี่ยวกับวิธีการทำสิ่งนี้ยกเว้นสิ่งหนึ่งที่ฉันสามารถคิดได้ แต่มันก็เป็นวิธีแก้ปัญหา การสร้างภาพหลายภาพจากนั้นใช้ขนาดหน้าจอ css เพื่อเปลี่ยนภาพ แต่ฉันอยากรู้ว่ามีวิธีการปฏิบัติมากขึ้นเพื่อให้บรรลุนี้ โดยทั่วไปสิ่งที่ฉันต้องการบรรลุคือภาพ (พร้อมลายน้ำ 'G') จะปรับขนาดโดยอัตโนมัติโดยไม่แสดงภาพน้อยลง ถ้าเป็นไปได้แน่นอน ลิงก์: g-floors.eu รหัสที่ฉันมีจนถึงตอนนี้ (ส่วนเนื้อหา) #content { background-image: url('../images/bg.png'); background-repeat: no-repeat; position: relative; width: 85%; height: 610px; margin-left: auto; margin-right: auto; }

197 css  responsive-design  background-image  image-resizing 

(นี่เป็นคำถามที่มีหลายส่วนฉันจะพยายามทำให้ดีที่สุดเพื่อสรุปสถานการณ์) ขณะนี้เรากำลังสร้างแอปพลิเคชั่นเว็บที่ตอบสนองได้ (โปรแกรมอ่านข่าว) ที่อนุญาตให้ผู้ใช้ปัดระหว่างเนื้อหาที่แท็บและเลื่อนในแนวตั้งภายในเนื้อหาแต่ละแท็บ วิธีการทั่วไปในการแก้ไขปัญหาคือให้มี wrapper divที่เติมวิวพอร์ตเบราว์เซอร์ตั้งค่าoverflowเป็นhiddenหรือautoจากนั้นเลื่อนในแนวนอนและ / หรือแนวตั้งภายในเบราว์เซอร์ วิธีนี้เป็นวิธีที่ดี แต่มีหนึ่งข้อเสียเปรียบหลัก: ตั้งแต่ความสูงของเอกสารเป็นสิ่งเดียวกับวิวพอร์ตเบราว์เซอร์เบราว์เซอร์บนมือถือจะไม่ซ่อนแถบที่อยู่ / เมนูนำทาง มีคุณสมบัติแฮ็กและวิวพอร์ตจำนวนมากที่ช่วยให้เราได้รับหน้าจออสังหาริมทรัพย์มากขึ้น แต่ไม่มีสิ่งใดที่มีประสิทธิภาพเท่าminimal-ui(แนะนำใน iOS 7.1) ข่าวมาเมื่อวานนี้ว่า iOS 8 beta4 ถูกลบออกminimal-uiจาก Mobile Safari (ดูหัวข้อ Webkit ในiOS 8 Release Notes ) ซึ่งทำให้เราสงสัยว่า: ไตรมาสที่ 1 เป็นไปได้ไหมที่จะซ่อนแถบที่อยู่บน Mobile Safari? เท่าที่เรารู้ว่า iOS 7 ไม่ตอบสนองอีกต่อไปสับนี้แสดงให้เห็นว่าเราต้องอยู่กับพื้นที่หน้าจอขนาดเล็กเว้นแต่ว่าเรานำมาใช้เป็นรูปแบบแนวตั้งหรือใช้งานwindow.scrollTomobile-web-app-capable ไตรมาสที่ 2 มันยังคงเป็นไปได้ไหมที่จะมีประสบการณ์แบบเต็มจอที่อ่อนนุ่มคล้ายกัน? ด้วยซอฟท์เต็มหน้าจอผมหมายถึงโดยไม่ต้องใช้mobile-web-app-capableเมตาแท็ก แอปพลิเคชันเว็บของเราสร้างขึ้นเพื่อให้สามารถเข้าถึงหน้าใดก็ได้สามารถคั่นหน้าหรือแชร์โดยใช้เมนูเบราว์เซอร์ดั้งเดิม โดยการเพิ่มmobile-web-app-capableเราป้องกันผู้ใช้จากการเรียกใช้เมนูดังกล่าว (เมื่อมันถูกบันทึกไว้ในหน้าจอหลัก) ซึ่งสร้างความสับสนและทำให้ผู้ใช้ไม่เป็นปฏิปักษ์ …

191 javascript  ios  css  responsive-design  mobile-safari 

IE8 ไม่รองรับการสืบค้นสื่อ CSS ต่อไปนี้หรือไม่: @import url("desktop.css") screen and (min-width: 768px); หากไม่เป็นเช่นนั้นวิธีอื่นในการเขียนคืออะไร? การทำงานเช่นเดียวกันนั้นใช้ได้ใน Firefox ปัญหาใด ๆ กับรหัสด้านล่าง? @import url("desktop.css") screen; @import url("ipad.css") only screen and (device-width:768px);

178 html  css  responsive-design  internet-explorer-8  media-queries 

Наэтотвопросестьответына Stack Overflow нарусском : Сеткаизадаптивных (ตอบสนอง) квадратов ฉันสงสัยว่าจะทำอย่างไรกับการสร้างเลย์เอาต์ด้วยสี่เหลี่ยมที่ตอบสนองได้ แต่ละช่องจะมีเนื้อหาแนวตั้งและแนวนอน ตัวอย่างที่เฉพาะเจาะจงจะแสดงด้านล่าง ...

170 html  css  responsive-design  grid-layout  aspect-ratio 

ฉันกำลังอ่านโพสต์สแต็คโอเวอร์โฟลว์ชื่อ "คุณสามารถสร้างการตอบสนองของ iFrame ได้หรือไม่" และหนึ่งในความเห็น / คำตอบหนึ่งทำให้ฉันได้jfiddle นี้ แต่เมื่อฉันพยายามใช้ HTML และ CSS เพื่อให้เหมาะกับความต้องการของฉันฉันก็ไม่ได้มีผลลัพธ์ / ความสำเร็จเหมือนกัน ฉันสร้างซอ fiddle ของฉันเองเพื่อให้ฉันสามารถแสดงให้คุณเห็นว่ามันไม่ทำงานเหมือนกันสำหรับฉัน ฉันแน่ใจว่ามีบางอย่างเกี่ยวกับประเภทของ iFrame ที่ฉันใช้ (เช่นรูปภาพของผลิตภัณฑ์อาจต้องตอบสนองด้วยหรือบางสิ่ง) ข้อกังวลหลักของฉันคือเมื่อผู้อ่านบล็อกของฉันเยี่ยมชมบล็อกบน iPhone ของพวกเขาฉันไม่ต้องการให้ทุกอย่างมีความกว้าง x (100% สำหรับเนื้อหาทั้งหมดของฉัน) จากนั้น iFrame ทำงานผิดพลาดและเป็นองค์ประกอบเดียวที่กว้างขึ้น เอาเนื้อหาอื่น ๆ ที่ผ่านมาทั้งหมดออกไป - ถ้ามันเข้าท่า?) อย่างไรก็ตามมีใครรู้บ้างว่าทำไมมันไม่ทำงาน ขอบคุณ. นี่คือ HTML & CSS ของ MY JSFIDDLE (หากคุณไม่ต้องการคลิกที่ลิงค์): <div class="wrapper"> <div class="h_iframe"> …

144 css  iframe  responsive-design