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

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

3
ข้อความค้นหาสื่อ CSS: ความกว้างสูงสุดหรือความสูงสูงสุด
เมื่อเขียนเคียวรีสื่อบันทึก CSS มีวิธีใดบ้างที่คุณสามารถระบุหลายเงื่อนไขด้วยตรรกะ "OR" ฉันกำลังพยายามทำสิ่งนี้: /* This doesn't work */ @media screen and (max-width: 995px OR max-height: 700px) { ... }
490 css  media-queries 
5
อะไรคือความแตกต่างระหว่าง "หน้าจอ" และ "หน้าจอเดียว" ในการค้นหาสื่อ
อะไรคือความแตกต่างระหว่างscreenและonly screenในการสืบค้นสื่อ? <link media="screen and (max-device-width: 480px)" rel="stylesheet" href="m.css" /> <link media="only screen and (max-device-width: 480px)" rel="stylesheet" href="m.css" /> ทำไมเราต้องใช้only screen? ไม่screenตัวเองไม่ได้ให้ข้อมูลเพียงพอที่จะแสดงผลเฉพาะสำหรับหน้าจอ? ฉันเคยเห็นเว็บไซต์ตอบสนองจำนวนมากใช้วิธีใดวิธีหนึ่งในสามวิธีต่อไปนี้: @media screen and (max-width:632px) @media (max-width:632px) @media only screen and (max-width:632px)
487 css  media-queries 
15
การค้นหาสื่อ: วิธีกำหนดเป้าหมายเดสก์ท็อปแท็บเล็ตและอุปกรณ์เคลื่อนที่
ฉันทำการค้นคว้าเกี่ยวกับการสืบค้นสื่อและฉันยังไม่เข้าใจวิธีกำหนดเป้าหมายอุปกรณ์ที่มีขนาดที่แน่นอน ฉันต้องการกำหนดเป้าหมายเดสก์ท็อปแท็บเล็ตและมือถือ ฉันรู้ว่าจะมีความแตกต่างบางอย่าง แต่มันก็ดีที่มีระบบทั่วไปที่สามารถใช้เพื่อกำหนดเป้าหมายอุปกรณ์เหล่านี้ ตัวอย่างบางส่วนที่ฉันได้พบ: # Mobile only screen and (min-width: 480px) # Tablet only screen and (min-width: 768px) # Desktop only screen and (min-width: 992px) # Huge only screen and (min-width: 1280px) หรือ: # Phone only screen and (max-width:320px) # Tablet only screen and (min-width:321px) and (max-width:768px) # Desktop …
18
Twitter Bootstrap 3: วิธีใช้แบบสอบถามสื่อ?
ฉันใช้ Bootstrap 3 เพื่อสร้างเค้าโครงตอบสนองที่ฉันต้องการปรับขนาดตัวอักษรไม่กี่ตามขนาดหน้าจอ ฉันจะใช้คิวรีสื่อเพื่อสร้างตรรกะชนิดนี้ได้อย่างไร
11
เคียวรีสื่อสามารถปรับขนาดตามองค์ประกอบ div แทนหน้าจอได้หรือไม่?
ฉันต้องการใช้เคียวรีสื่อบันทึกเพื่อปรับขนาดองค์ประกอบตามขนาดของdivองค์ประกอบที่มีอยู่ฉันไม่สามารถใช้ขนาดหน้าจอได้เนื่องจากใช้divเป็นเพียงวิดเจ็ตภายในเว็บเพจและขนาดอาจแตกต่างกันไป ปรับปรุง ดูเหมือนว่าจะมีงานที่ทำอยู่ในตอนนี้: https://github.com/ResponsiveImagesCG/cq-demos
317 css  media-queries 
12
เป็นไปได้หรือไม่ที่จะวางกฎ CSS @media แบบอินไลน์
ฉันต้องการโหลดภาพแบนเนอร์ในแอป HTML5 แบบไดนามิกและต้องการรุ่นที่แตกต่างกันสองรุ่นเพื่อให้เหมาะกับความกว้างของหน้าจอ ฉันไม่สามารถระบุความกว้างหน้าจอของโทรศัพท์ได้อย่างถูกต้องดังนั้นวิธีเดียวที่ฉันสามารถทำได้คือการเพิ่มภาพพื้นหลังของ div และใช้ @media เพื่อกำหนดความกว้างของหน้าจอและแสดงภาพที่ถูกต้อง ตัวอย่างเช่น: <span style="background-image:particular_ad.png; @media (max-width:300px){background-image:particular_ad_small.png;}"></span> เป็นไปได้หรือไม่มีใครมีคำแนะนำอื่น ๆ ?
293 html  css  media-queries 
9
หน้าจอ @media และ (ความกว้างสูงสุด: 1024px) หมายถึงอะไรใน CSS
ฉันพบรหัสชิ้นนี้ในไฟล์ CSS ที่ฉันสืบทอด แต่ฉันไม่สามารถเข้าใจได้: @media screen and (max-width: 1024px){ img.bg { left: 50%; margin-left: -512px; } } โดยเฉพาะสิ่งที่เกิดขึ้นในบรรทัดแรก
245 css  media-queries 
8
อะไรคือความแตกต่างระหว่างความกว้างสูงสุดของอุปกรณ์และความกว้างสูงสุดสำหรับเว็บบนมือถือ
ฉันต้องพัฒนาหน้า html สำหรับโทรศัพท์ iphone / android แต่อะไรคือความแตกต่างระหว่างmax-device-widthและmax-width? ฉันต้องใช้ CSS ที่แตกต่างกันสำหรับขนาดหน้าจอที่แตกต่างกัน @media all and (max-device-width: 400px) @media all and (max-width: 400px) ความแตกต่างคืออะไร?
5
@ สื่อความกว้างขั้นต่ำและความกว้างสูงสุด
ฉันมีการ@mediaตั้งค่านี้: HTML : <head> <meta name="viewport" content="width=device-width, user-scalable=no" /> </head> CSS : @media screen and (min-width: 769px) { /* STYLES HERE */ } @media screen and (min-device-width: 481px) and (max-device-width: 768px) { /* STYLES HERE */ } @media only screen and (max-device-width: 480px) { /* STYLES HERE */ } ด้วยการตั้งค่านี้มันทำงานบน …
3
@ สื่อสื่อแบบสอบถามและการขัดแย้งไวยากรณ์ ASP.NET MVC
ฉันมีเว็บไซต์ขนาดใหญ่ที่ทำงานใน ASP.NET MVC โดยใช้เอ็นจิ้นมุมมองมีดโกน ฉันมีสไตล์ชีทพื้นฐานซึ่งประกอบด้วยสไตล์ทั่วไปทั้งหมดสำหรับไซต์ทั้งหมด อย่างไรก็ตามในบางครั้งฉันมีรูปแบบเฉพาะของหน้าซึ่งใน<head>หน้า - โดยปกติจะเป็นหนึ่งหรือสองบรรทัด ฉันไม่ชอบใส่ CSS <head>เป็นพิเศษเพราะมันไม่ใช่การแยกข้อกังวลอย่างจริงจัง แต่สำหรับหนึ่งหรือสองบรรทัดที่เป็นจริงสำหรับหน้านั้นฉันไม่ต้องการแนบไฟล์อื่นและเพิ่มแบนด์วิดท์ ฉันมีอินสแตนซ์ที่ฉันต้องการใส่เคียวรีสื่อบันทึกของหน้าเฉพาะลงใน<head>แต่เนื่องจากเคียวรีสื่อใช้ @ สัญลักษณ์และวงเล็บปีกกา {} มันขัดแย้งกับไวยากรณ์ของมีดโกน: @section cphPageHead{ <style> /* PAGE SPECIFIC CSS */ ... @media only screen and (max-width : 960px) <-- the @ symbol here is clashing! { ... } } </style> } มีวิธีที่ฉันจะได้รับรอบนี้หรือไม่?
17
$ (หน้าต่าง) .width () ไม่เหมือนกับการสืบค้นสื่อ
ฉันใช้ Twitter Bootstrap ในโครงการ เช่นเดียวกับรูปแบบการบูตเริ่มต้นฉันได้เพิ่มบางอย่างของตัวเอง //My styles @media (max-width: 767px) { //CSS here } ฉันใช้ jQuery เพื่อเปลี่ยนลำดับขององค์ประกอบบางอย่างบนหน้าเว็บเมื่อความกว้างของวิวพอร์ตน้อยกว่า 767px $(document).load($(window).bind("resize", checkPosition)); function checkPosition() { if($(window).width() < 767) { $("#body-container .main-content").remove().insertBefore($("#body-container .left-sidebar")); } else { $("#body-container .main-content").remove().insertAfter($("#body-container .left-sidebar")); } } ปัญหาที่ฉันมีคือความกว้างที่คำนวณโดย$(window).width()และความกว้างที่คำนวณโดย CSS ดูเหมือนจะไม่เหมือนกัน เมื่อ$(window).width()ส่งคืน 767 css จะคำนวณความกว้างวิวพอร์ตเป็น 751 ดังนั้นจึงมีความแตกต่าง 16px มีใครรู้บ้างว่าอะไรทำให้เกิดสิ่งนี้และฉันจะแก้ปัญหาได้อย่างไร มีคนแนะนำว่าความกว้างของแถบเลื่อนไม่ได้ถูกนำมาพิจารณาและใช้$(window).innerWidth() …
16
เหตุใดข้อความค้นหาสื่อ CSS3 ของฉันจึงไม่ทำงาน
ใน styles.css ฉันใช้คิวรีสื่อซึ่งทั้งคู่ใช้รูปแบบของ: /*--[ Normal CSS styles ]----------------------------------*/ @media only screen and (max-width: 767px) { /*--[ Mobile styles go here]---------------------------*/ } ไซต์ปรับขนาดเป็นเลย์เอาต์ที่ฉันต้องการในเบราว์เซอร์ปกติ (Safari, Firefox) เมื่อฉันย่อขนาดหน้าต่างอย่างไรก็ตามเลย์เอาต์มือถือไม่แสดงเลยบนโทรศัพท์ แต่ฉันเพิ่งเห็น CSS เริ่มต้น ใครช่วยชี้ฉันในทิศทางที่ถูกต้องได้ไหม
11
รองรับ IE8 สำหรับ CSS Media Query
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);
19
CSS @media ปัญหาการพิมพ์ด้วยสีพื้นหลัง;
ฉันใหม่ที่นี่ที่ บริษัท นี้และเรามีผลิตภัณฑ์ที่ใช้ไมล์ css ฉันพยายามที่จะทำให้สไตล์พิมพ์สำหรับ app ของเรา แต่ฉันมีปัญหาเกี่ยวกับในbackground-color@media print @media print { #header{display:none;} #adwrapper{display:none;} td { border-bottom: solid; border-right: solid; background-color: #c0c0c0; } } ทุกอย่างใช้งานได้ฉันสามารถแก้ไขเส้นขอบและสิ่งเหล่านี้ แต่background-colorจะไม่ผ่านในการพิมพ์ ตอนนี้ฉันเข้าใจแล้วว่าคุณอาจไม่สามารถตอบคำถามของฉันได้หากไม่มีรายละเอียดเพิ่มเติม ฉันแค่อยากรู้ว่าใครเคยมีปัญหานี้หรืออะไรทำนองนี้มาก่อน
176 css  media-queries 
10
จุดพัก Bootstrap 3 และคิวรีสื่อ
ในเอกสารการสืบค้นสื่อ Bootstrap 3มันบอกว่า: เราใช้เคียวรีสื่อบันทึกต่อไปนี้ในไฟล์ Less เพื่อสร้างเบรกพอยต์สำคัญในระบบกริดของเรา อุปกรณ์ขนาดเล็กพิเศษ (โทรศัพท์น้อยกว่า 768px): ไม่มีการสืบค้นสื่อเนื่องจากนี่เป็นค่าเริ่มต้นใน Bootstrap อุปกรณ์ขนาดเล็ก (แท็บเล็ต 768px ขึ้นไป): @media (min-width: @screen-sm-min) { ... } อุปกรณ์ขนาดกลาง (เดสก์ท็อป 992px ขึ้นไป): @media (min-width: @screen-md-min) { ... } อุปกรณ์ขนาดใหญ่ (เดสก์ท็อปขนาดใหญ่ 1200px ขึ้นไป): @media (min-width: @screen-lg-min) { ... } เราควรที่จะสามารถใช้@screen-sm, @screen-mdและ@screen-lgชื่อที่อยู่ในคำสั่งสื่อของเราเช่นกัน? เพราะมันไม่ได้ผลสำหรับฉัน ฉันต้องใช้การวัดพิกเซลเช่น@media (min-width: 768px) {...}ก่อนที่มันจะทำงาน ฉันกำลังทำอะไรผิดหรือเปล่า? นอกจากนี้อ้างอิงถึง …
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.