มูลนิธิ - แบบสอบถามสื่อ

คิวรีสื่อคือโมดูล 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 ตรวจสอบและรับชื่อของเบรกพอยต์สำหรับฟังก์ชันที่ระบุตามลำดับ	สตริง