คำถามติดแท็ก media-queries

คิวรีสื่อเปิดใช้งานแอปพลิเคชันตามเงื่อนไขของสไตล์ CSS ตามประเภทสื่อเช่นหน้าจอและสิ่งพิมพ์และเงื่อนไขของคุณสมบัติสื่อเช่นวิวพอร์ตและความสูงและความกว้างของอุปกรณ์ เป็นส่วนหนึ่งของข้อกำหนด W3C CSS3

5
วิธีการตรวจจับการวางแนวอุปกรณ์โดยใช้คิวรี่สื่อ CSS?
ใน JavaScript โหมดการวางแนวสามารถตรวจจับได้โดยใช้: if (window.innerHeight > window.innerWidth) { portrait = true; } else { portrait = false; } อย่างไรก็ตามมีวิธีตรวจจับทิศทางโดยใช้ CSS เท่านั้นหรือไม่ เช่น. สิ่งที่ต้องการ: @media only screen and (width > height) { ... }
4
Media Queries - ในระหว่างความกว้างสอง
ฉันพยายามใช้คำสั่งสื่อ CSS3 เพื่อสร้างคลาสที่ปรากฏเฉพาะเมื่อความกว้างมากกว่า 400px และน้อยกว่า 900px ฉันรู้ว่านี่อาจจะง่ายมากและฉันก็ขาดอะไรที่ชัดเจน แต่ฉันไม่สามารถเข้าใจได้ สิ่งที่ฉันได้มาคือโค้ดด้านล่างขอขอบคุณสำหรับความช่วยเหลือ @media (max-width:400px) and (min-width:900px) { .class { display: none; } }
141 css  media-queries 
11
ข้อความค้นหาสื่อ CSS ของ iPhone 5
iPhone 5 มีหน้าจอที่ยาวขึ้นและไม่ดึงดูดมุมมองบนมือถือของเว็บไซต์ของฉัน คำถามเกี่ยวกับการออกแบบที่ตอบสนองใหม่สำหรับ iPhone 5 คืออะไรและฉันสามารถรวมกับคำค้นหาของ iPhone ที่มีอยู่ได้หรือไม่ ข้อความค้นหาสื่อปัจจุบันของฉันคือ: @media only screen and (max-device-width: 480px) {}
11
รับความกว้างของอุปกรณ์ในจาวาสคริปต์
มีวิธีรับความกว้างอุปกรณ์ของผู้ใช้ซึ่งต่างจากความกว้างของวิวพอร์ตโดยใช้จาวาสคริปต์หรือไม่ แบบสอบถามสื่อ CSS เสนอสิ่งนี้อย่างที่ฉันพูดได้ @media screen and (max-width:640px) { /* ... */ } และ @media screen and (max-device-width:960px) { /* ... */ } สิ่งนี้มีประโยชน์หากฉันกำหนดเป้าหมายสมาร์ทโฟนในแนวนอน ตัวอย่างเช่นบน iOS การประกาศว่า max-width:640pxจะกำหนดเป้าหมายทั้งโหมดแนวนอนและแนวตั้งแม้ใน iPhone 4 นี่ไม่ใช่กรณีสำหรับ Android เท่าที่ฉันสามารถบอกได้ดังนั้นการใช้ความกว้างของอุปกรณ์ในอินสแตนซ์นี้จะกำหนดเป้าหมายทั้งสองทิศทางได้สำเร็จ โดยไม่กำหนดเป้าหมายอุปกรณ์เดสก์ท็อป อย่างไรก็ตามหากฉันเรียกใช้การรวมจาวาสคริปต์ตามความกว้างของอุปกรณ์ดูเหมือนว่าฉันจะถูก จำกัด ให้ทดสอบความกว้างของวิวพอร์ตซึ่งหมายถึงการทดสอบเพิ่มเติมดังต่อไปนี้ if ($(window).width() <= 960 && $(window).height <= 640) { /* ... */ } …
10
การสืบค้นสื่อเพื่อตรวจสอบว่าอุปกรณ์เป็นหน้าจอสัมผัสหรือไม่
วิธีใดที่ปลอดภัยที่สุดโดยใช้การสืบค้นสื่อเพื่อให้บางสิ่งเกิดขึ้นเมื่อไม่ได้อยู่บนอุปกรณ์หน้าจอสัมผัส หากไม่มีวิธีใดคุณแนะนำให้ใช้โซลูชัน JavaScript เช่น!window.Touchหรือ Modernizr หรือไม่
122 css  touch  media-queries 
7
การใช้ตัวแปร Sass กับ CSS3 Media Queries
ฉันกำลังพยายามรวมการใช้ตัวแปร Sass กับคำสั่ง @media ดังนี้: $base_width:1160px; @media screen and (max-width: 1170px) {$base_width: 960px;} @media screen and (min-width: 1171px) {$base_width: 1160px;} $base_width จากนั้นกำหนดไว้ที่จุดต่างๆในการวัดเปอร์เซ็นต์ตามความกว้างของสไตล์ชีตเพื่อสร้างเค้าโครงของไหล เมื่อฉันทำสิ่งนี้ดูเหมือนว่าตัวแปรจะได้รับการยอมรับอย่างถูกต้อง แต่เงื่อนไขสำหรับแบบสอบถามสื่อไม่ได้รับ ตัวอย่างเช่นโค้ดด้านบนจะสร้างเค้าโครง 1160px โดยไม่คำนึงถึงความกว้างของหน้าจอ ถ้าฉันพลิกคำสั่ง @media ดังนี้: @media screen and (min-width: 1171px) {$base_width: 1160px;} @media screen and (max-width: 1170px) {$base_width: 960px;} สร้างเค้าโครง 960px อีกครั้งโดยไม่คำนึงถึงความกว้างของหน้าจอ โปรดทราบว่าหากฉันลบบรรทัดแรก$base_width: 1160px;จะส่งกลับข้อผิดพลาดสำหรับตัวแปรที่ไม่ได้กำหนด มีความคิดอะไรที่ฉันขาดหายไป?
3
จอภาพ Retina ภาพพื้นหลังความละเอียดสูง
นี่อาจฟังดูเป็นคำถามโง่ ๆ ถ้าฉันใช้ตัวอย่าง 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 เพื่อให้ตรงกับภาพพื้นหลังความละเอียดสูงใหม่หรือไม่
6
ข้อความค้นหาสื่อจำลองโหมดอุปกรณ์ Chrome ไม่ทำงาน
ด้วยเหตุผลบางประการโหมดจำลองอุปกรณ์ไม่อ่านข้อความค้นหาสื่อของฉัน ทำงานบนไซต์อื่น ๆ รวมถึงไซต์ของฉันเองที่ฉันสร้างด้วย bootstrap แต่มันไม่ทำงานกับการสืบค้นสื่อที่ฉันใช้ตั้งแต่เริ่มต้น (การคลิกปุ่มการสืบค้นสื่อจะเปลี่ยนปุ่มเป็นสีน้ำเงิน แต่ไม่มีการแสดงข้อความค้นหาสื่อ) ไฟล์ทดสอบด้านล่าง นี่เป็นข้อบกพร่องใน Chrome หรือมีบางอย่างที่ฉันต้องเปลี่ยนแปลงในไฟล์หรือไม่ <!DOCTYPE html> <!-- Media Queries Example 1 Sam Scott, Fall 2014 --> <html> <head> <title>MQ Example 1</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> body { font-family: sans-serif; } h1 { color: red; } h2 { color:blue; } …
12
Bootstrap - การลบช่องว่างภายในหรือระยะขอบเมื่อขนาดหน้าจอเล็กลง
แก้ไข: บางทีฉันควรถามว่าตัวเลือกใดตั้งค่าช่องว่างด้านข้างเมื่อหน้าจอลดลงต่ำกว่าความกว้าง 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 ฉันควรเขียนทับคิวรีสื่อหรือตัวเลือกใดเพื่อลบช่องว่างภายในนี้บนหน้าจอขนาดเล็ก
3
อะไรคือกฎสำหรับคิวรีสื่อ CSS ที่ทับซ้อนกัน?
เราจะจัดพื้นที่แบบสอบถามสื่ออย่างถูกต้องอย่างไรเพื่อหลีกเลี่ยงความซ้ำซ้อน ตัวอย่างเช่นหากเราพิจารณารหัส: @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 พิกเซลล่ะ? (เห็นได้ชัดว่าไม่ใช่บนจอแสดงผลทั่วไป แต่เป็นจอประสาทตา?) ฉันอยากรู้มากที่สุดเกี่ยวกับคำตอบที่นี่เมื่อพิจารณาจากข้อมูลจำเพาะ
6
การขยายตัวเลือกจากภายในแบบสอบถามสื่อด้วย Sass
ฉันมีคลาสไอเท็มและคลาส "ตัวปรับแต่ง" ขนาดกะทัดรัด: .item { ... } .item.compact { /* styles to make .item smaller */ } แค่นี้ก็เรียบร้อย อย่างไรก็ตามฉันต้องการเพิ่ม@mediaคำค้นหาที่บังคับให้.itemชั้นเรียนมีขนาดกะทัดรัดเมื่อหน้าจอมีขนาดเล็กพอ ในความคิดแรกนี่คือสิ่งที่ฉันพยายามทำ: .item { ... } .item.compact { ... } @media (max-width: 600px) { .item { @extend .item.compact; } } แต่สิ่งนี้ทำให้เกิดข้อผิดพลาดต่อไปนี้: คุณไม่สามารถ @ ขยายตัวเลือกภายนอกจากภายใน @media คุณสามารถเลือก @extend ได้เฉพาะในคำสั่งเดียวกันเท่านั้น ฉันจะทำสิ่งนี้ให้สำเร็จโดยใช้ SASS โดยไม่ต้องหันไปคัดลอก / …
8
วิธีลบคุณสมบัติตอบสนองใน Twitter Bootstrap 3
เนื่องจาก Bootstrap 3 ไม่มีไฟล์แยกต่างหากสำหรับสไตล์ชีตที่ตอบสนองและมาตรฐานอีกต่อไป ดังนั้นฉันจะลบคุณสมบัติที่ตอบสนองได้อย่างง่ายดายได้อย่างไร
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.