มูลนิธิ - แบบสอบถามสื่อ
คิวรีสื่อคือโมดูล CSS3 ที่มีคุณสมบัติของสื่อเช่นความกว้างความสูงสีและแสดงเนื้อหาตามความละเอียดหน้าจอที่ระบุ
Foundation ใช้คิวรีสื่อต่อไปนี้เพื่อสร้างช่วงรายละเอียด -
Small - ใช้สำหรับหน้าจอใดก็ได้
Medium - ใช้สำหรับหน้าจอ 640 พิกเซลและกว้างขึ้น
Large - ใช้สำหรับหน้าจอ 1024 พิกเซลและกว้างกว่า
คุณสามารถเปลี่ยนขนาดหน้าจอโดยใช้การเรียนเบรกพอยต์ ตัวอย่างเช่นคุณสามารถใช้. small -6 class สำหรับหน้าจอขนาดเล็กและ. medium-4สำหรับหน้าจอขนาดกลางดังที่แสดงในข้อมูลโค้ดต่อไปนี้ -
<div class = "row">
<div class = "small-6 medium-4 columns"></div>
<div class = "small-6 medium-8 columns"></div>
</div>
การเปลี่ยนเบรกพอยต์
คุณสามารถเปลี่ยนจุดพักได้หากแอปพลิเคชันของคุณใช้ Foundation เวอร์ชัน SASS คุณสามารถวางชื่อเบรกพอยท์ไว้ใต้ตัวแปร$ breakpointsในไฟล์การตั้งค่าดังที่แสดงด้านล่าง -
$breakpoints: (
small: 0px,
medium: 640px,
large: 1024px,
xlarge: 1200px,
xxlarge: 1440px,
);
คุณสามารถเปลี่ยนคลาสเบรกพอยต์ในไฟล์การตั้งค่าได้โดยแก้ไขตัวแปร$ เบรกพอยต์คลาส หากคุณต้องการใช้. large class ใน CSS ให้เพิ่มไปที่ท้ายรายการตามที่แสดงด้านล่าง -
$breakpoints-classes: (small medium large);
สมมติว่าคุณต้องการใช้. xlarge class ใน CSS จากนั้นเพิ่มคลาสนี้ที่ท้ายรายการตามที่แสดงด้านล่าง -
$breakpoints-classes: (small medium large xlarge);
SASS
ส่วนผสมของเบรกพอยต์
คุณสามารถเขียนคำสั่งสื่อโดยใช้เบรกพอยต์ () mixin พร้อมกับ@include
ใช้คีย์เวิร์ดลงหรือเฉพาะพร้อมกับค่าเบรกพอยต์เพื่อเปลี่ยนพฤติกรรมของคิวรีสื่อดังที่แสดงในรูปแบบโค้ดต่อไปนี้
.class_name {
// code for medium screens and smaller
@include breakpoint(medium down) { }
// code for medium screens only
@include breakpoint(medium only) { }
}
คุณสามารถใช้คำสั่งสามสื่อแนวตั้ง , แนวนอนและจอประสาทตาสำหรับการวางแนวอุปกรณ์หรือความหนาแน่นของพิกเซลและพวกเขาจะไม่ได้ความกว้างตามคำสั่งสื่อ
ฟังก์ชันเบรกพอยต์
คุณสามารถใช้ฟังก์ชันของเบรกพอยต์ ()มิกซ์อินได้โดยใช้ฟังก์ชันภายใน
ฟังก์ชันเบรกพอยต์ ()สามารถใช้เพื่อเขียนคิวรีสื่อของตัวเองได้โดยตรง -
@media screen and #{breakpoint(medium)} {
// code for medium screens and up styles
}
JavaScript
การทำงานกับ Media Queries
Foundation JavaScript จัดเตรียมฟังก์ชันMediaQuery.currentเพื่อเข้าถึงชื่อเบรกพอยต์ปัจจุบันบนวัตถุFoundation.MediaQueryตามที่ระบุด้านล่าง -
Foundation.MediaQuery.current
MediaQuery.currentฟังก์ชั่นการแสดงขนาดเล็ก , กลาง , ใหญ่ชื่อเบรกพอยต์ในปัจจุบัน
คุณสามารถรับแบบสอบถามสื่อของเบรกพอยต์โดยใช้ฟังก์ชันMediaQuery.getดังที่แสดงด้านล่าง -
Foundation.MediaQuery.get('small')
การอ้างอิง Sass
ตัวแปร
ตารางต่อไปนี้แสดงรายการตัวแปร SASS ซึ่งสามารถใช้เพื่อปรับแต่งรูปแบบเริ่มต้นของส่วนประกอบ -
ซีเนียร์ | ชื่อและคำอธิบาย | ประเภท | ค่าเริ่มต้น |
---|---|---|---|
1 | $breakpoints เป็นชื่อเบรกพอยต์ที่สามารถใช้เขียนคิวรีสื่อโดยใช้เบรกพอยต์ ()มิกซ์อิน |
แผนที่ | เล็ก: 0px กลาง: 640px ใหญ่: 1024px xlarge: 1200px xxlarge: 1440px |
2 | $breakpoint-classes คุณสามารถเปลี่ยนเอาต์พุตคลาส CSS ได้โดยแก้ไขตัวแปร$ breakpoint-class |
รายการ | เล็กกลางใหญ่ |
มิกซ์
Mixins สร้างกลุ่มสไตล์เพื่อสร้างโครงสร้างคลาส CSS ของคุณสำหรับคอมโพเนนต์ Foundation
BREAKPOINT
ใช้เบรกพอยต์ ()มิกซ์อินเพื่อสร้างคิวรีสื่อและรวมถึงกิจกรรมต่อไปนี้ -
หากมีการส่งสตริงมิกซินจะค้นหาสตริงในแมป$ breakpointsและสร้างคิวรีสื่อ
หากคุณกำลังใช้ค่าพิกเซลแล้วแปลงเป็นค่าใช้ em $ REM ฐาน
ถ้าส่งค่า rem ก็จะเปลี่ยนหน่วยเป็น em
หากคุณกำลังใช้ค่า em ก็สามารถใช้ได้ตามที่เป็นอยู่
ตารางต่อไปนี้ระบุพารามิเตอร์ที่ใช้โดยเบรกพอยต์ -
ซีเนียร์ | ชื่อและคำอธิบาย | ประเภท | ค่าเริ่มต้น |
---|---|---|---|
1 | $value เป็นการประมวลผลค่าโดยใช้ชื่อเบรกพอยต์ค่า px, rem หรือ em |
คำหลักหรือตัวเลข | ไม่มี |
ฟังก์ชั่น
BREAKPOINT
ใช้เบรกพอยต์ ()มิกซ์อินเพื่อสร้างคิวรีสื่อที่มีค่าอินพุตที่ตรงกัน
ตารางต่อไปนี้ระบุค่าอินพุตที่เป็นไปได้ที่ใช้โดยเบรกพอยต์ -
ซีเนียร์ | ชื่อและคำอธิบาย | ประเภท | ค่าเริ่มต้น |
---|---|---|---|
1 | $val ประมวลผลค่าโดยใช้ชื่อเบรกพอยต์ค่า px, rem หรือ em |
คำหลักหรือตัวเลข | เล็ก |
การอ้างอิง JavaScript
ฟังก์ชั่น
มีฟังก์ชันสองประเภท -
.atLeast- ตรวจสอบหน้าจอ อย่างน้อยต้องกว้างเป็นจุดพัก
.get - ใช้เพื่อรับแบบสอบถามสื่อของเบรกพอยต์
ตารางต่อไปนี้ระบุพารามิเตอร์ที่ใช้โดยฟังก์ชันข้างต้น -
ซีเนียร์ | ชื่อและคำอธิบาย | ประเภท |
---|---|---|
1 | size ตรวจสอบและรับชื่อของเบรกพอยต์สำหรับฟังก์ชันที่ระบุตามลำดับ |
สตริง |