เนื้อหา
- 01. การเพิ่มแบบสอบถามสื่อ
- 02. กายวิภาคของแบบสอบถามสื่อ
- 03. อีกอย่างหนึ่ง…
- 04. การเลือกจุดพัก
- 05. การปรับภาพขนาดย่อของเรา
- 06. ไม่ใช่แค่ความกว้าง
- ความรู้ที่จำเป็น: CSS และ HTML ระดับกลาง
- ต้องใช้: โปรแกรมแก้ไขข้อความเบราว์เซอร์ที่ทันสมัยซอฟต์แวร์กราฟิก
- เวลาโครงการ: 1 ชั่วโมง (รวม 5 ชั่วโมง)
- ไฟล์สนับสนุน
ส่วนที่ค่อนข้างใหม่ของข้อกำหนด CSS การสืบค้นสื่อถือเป็นแง่มุมที่น่าตื่นเต้นที่สุดของการออกแบบเว็บที่ตอบสนองอย่างไม่ต้องสงสัยและเป็นพื้นที่ที่พร้อมสำหรับการทดลองเพิ่มเติม
หลังจากยอมรับความจำเป็นในการใช้เลย์เอาต์แบบปรับเปลี่ยนได้บางคนเห็นว่าการสืบค้นของสื่อเป็นวิธีในการติดตั้งโครงร่างที่ปรับเปลี่ยนได้บนไซต์ที่มีความกว้างคงที่ที่มีอยู่ ในบรรดาผู้ที่ใช้เลย์เอาต์ที่ตอบสนองได้หลายคนได้ทำเช่นนั้นจากมุมมองของเดสก์ท็อปการซ่อนเนื้อหาและคุณสมบัติขณะที่วิวพอร์ตแคบลง
ตลอดบทช่วยสอนนี้เราได้ใช้แนวทางอื่นสำหรับอุปกรณ์เคลื่อนที่มาก่อน ตอนนี้ในขณะที่เราต้องการรวมข้อความค้นหาสื่อเราสามารถคิดได้ เพิ่ม คุณสมบัติในขณะที่อสังหาริมทรัพย์บนหน้าจอเพิ่มขึ้นปลอดภัยในความรู้ที่มาร์กอัปและการออกแบบที่หนุนไซต์ของเราให้พื้นฐานที่น่านับถือ
วันนี้เราจะก้าวไปไกลกว่าพอร์ตโฟลิโอรูปแบบของเราและสร้างหน้าเว็บแต่ละหน้าที่จำเป็นสำหรับเว็บไซต์ของเรา ในการทำเช่นนี้เราจะดูวิธีสร้างแบบสอบถามสื่อและนำไปใช้ในวิธีที่ตอบสนองอย่างแท้จริง
01. การเพิ่มแบบสอบถามสื่อ
เมื่อส่วนประกอบในพอร์ตโฟลิโอแพทเทิร์นของเราสมบูรณ์และทำงานนอกขอบเขตของเลย์เอาต์ใด ๆ ก็ถึงเวลาย้ายไปไว้ในหน้าต่างๆที่ประกอบเป็นไซต์ของเรา
เราจะเริ่มต้นด้วยหน้าแรกของเรา จากการออกแบบที่เน้นเดสก์ท็อปเราจะเห็นว่าในวิวพอร์ตที่กว้างขึ้นเลย์เอาต์ของเราควรปรากฏดังนี้:
การวัดจากการออกแบบของเราเราสามารถอธิบายพื้นที่เอกสารใน CSS ได้ดังนี้:
.document {
ช่องว่างภายใน: 0 5%;
}
.main {
ความกว้าง: 74.242424242424%; / * 784/1056 * /
ลอย: ซ้าย;
}
. complementary {
ความกว้าง: 22.727272727273%; / * 240/1056 * /
ลอย: ขวา;
}
ดังที่เราได้เรียนรู้ในส่วนที่สองของบทช่วยสอนนี้เรากำลังใช้สูตรต่อไปนี้เพื่อคำนวณเปอร์เซ็นต์ความกว้างของคอลัมน์เหล่านี้:
(เป้าหมาย / บริบท) * 100 = ผลลัพธ์
เมื่อเราปรับขนาดเบราว์เซอร์ของเราเราจะเห็นว่าเค้าโครงเดสก์ท็อปของเราจะปรับขนาดจากหน้าจอขนาดเล็กที่สุดไปจนถึงขนาดใหญ่ที่สุด แน่นอนว่าในขนาดเล็กคอลัมน์จะแคบเกินไปและความยาวบรรทัดสั้นจนอ่านยาก เราต้องการเลย์เอาต์นี้ก็ต่อเมื่อมีพื้นที่เพียงพอให้ใช้งานได้
นี่คือที่มาของการสืบค้นสื่อสมมติว่าเค้าโครงนี้ควรมีผลเฉพาะเมื่อเบราว์เซอร์กว้างกว่า 768px เราสามารถเพิ่ม CSS ต่อไปนี้:
.document {
ช่องว่างภายใน: 0 5%;
}
หน้าจอ @media และ (ความกว้างต่ำสุด: 768px) {
.main {
ความกว้าง: 74.242424242424%; / * 784/1056 * /
ลอย: ซ้าย;
}
. complementary {
ความกว้าง: 22.727272727273%; / * 240/1056 * /
ลอย: ขวา;
}
}
ตอนนี้เมื่อวิวพอร์ตแคบกว่า 768px ทุกสิ่งที่อยู่ในแบบสอบถามสื่อจะถูกละเว้น เบราว์เซอร์ใด ๆ ที่ไม่รองรับการสืบค้นสื่อจะถูกละเว้นด้วย
02. กายวิภาคของแบบสอบถามสื่อ
หากต้องการทำความเข้าใจว่าเกิดอะไรขึ้นที่นี่เรามาดูวิธีสร้างข้อความค้นหาสื่อ เราสามารถแยกออกเป็นสองส่วน:
- หน้าจอ @media: ส่วนแรกของแบบสอบถามสื่อคือไฟล์ ประเภทสื่อ. คุณอาจจำไวยากรณ์นี้ได้หากคุณเคยรวมสไตล์การพิมพ์ไว้ใน CSS ของคุณ คุณอาจรู้จักชื่อประเภทจากไฟล์ สื่อ แอตทริบิวต์บน ลิงค์> ธาตุ. นั่นเป็นเพราะทั้งสองยอมรับชุดประเภทสื่อที่ได้รับอนุมัติซึ่งพบในข้อกำหนด CSS 2.1
- (ความกว้างต่ำสุด: 768px): ส่วนที่สองคือ แบบสอบถาม. ซึ่งรวมถึงไฟล์ ลักษณะเฉพาะ ที่จะสอบถาม (ในกรณีนี้คือความกว้างขั้นต่ำของวิวพอร์ต) และค่าที่เกี่ยวข้อง มูลค่า เพื่อทดสอบ (768px)
เมื่อเราพูดถึงการออกแบบเว็บที่ตอบสนองมีแนวโน้มที่จะมุ่งเน้นไปที่ความกว้าง แต่ก็มีคุณสมบัติอื่น ๆ ที่เราสามารถทดสอบได้เช่นกัน:
- (นาที - | สูงสุด -) ความกว้าง และ (ต่ำสุด - | สูงสุด -) ความสูง: สิ่งเหล่านี้ช่วยให้เราสามารถสอบถามความกว้างและความสูงของวิวพอร์ต (เช่นหน้าต่างเบราว์เซอร์)
- (ต่ำสุด | สูงสุด -) ความกว้างของอุปกรณ์ และ (ต่ำสุด - | สูงสุด -) ความสูงของอุปกรณ์: สิ่งเหล่านี้ช่วยให้เราสามารถสอบถามความกว้างของจอแสดงผลทั้งหมดได้ จากประสบการณ์ของฉันโดยปกติแล้วการจัดวางฐานบนวิวพอร์ตจะเหมาะสมกว่าการแสดงผล
- ปฐมนิเทศ: คุณสามารถนึกถึงความเป็นไปได้ที่นี่ได้ทันที ลองนึกถึงแอปที่แสดงเนื้อหาที่แตกต่างกันตามการวางแนวโทรศัพท์ของคุณซึ่งสามารถทำได้เช่นเดียวกันบนเว็บ
- (นาที - | สูงสุด -) อัตราส่วน: สิ่งนี้ช่วยให้เราปรับเปลี่ยนเลย์เอาต์ตามอัตราส่วนของหน้าต่างเบราว์เซอร์ ...
- (นาที - | สูงสุด -) อัตราส่วนอุปกรณ์: …และสิ่งนี้ทำให้เราสามารถทำได้เช่นเดียวกันตามอัตราส่วนภาพของอุปกรณ์ Owen Gregory เขียนบทความที่ยอดเยี่ยมเมื่อปีที่แล้วซึ่งได้สำรวจวิธีที่เราสามารถใช้แบบสอบถามนี้เพื่อเชื่อมโยงการออกแบบของเรากับอุปกรณ์ที่ปรากฏ
- (นาที - | สูงสุด -) ขาวดำ: นอกจากนี้เรายังสามารถทดสอบว่าอุปกรณ์มีหน้าจอขาวดำหรือไม่ ลองนึกภาพว่าสิ่งนี้จะมีประโยชน์อย่างไรหากอุปกรณ์ Kindle e-ink ของ Amazon ไม่โกหกและรายงานหน้าจอเป็นสี!
ส่วนสุดท้ายของคำถามของเราอาจมีประโยชน์มากที่สุด โดยใช้ และเราสามารถทดสอบคุณสมบัติหลายอย่างได้ในแบบสอบถามเดียว ตัวอย่างเช่น:
หน้าจอ @media และ (ความกว้างต่ำสุด: 768px) และ (การวางแนว: แนวนอน) {
...
}
อย่างที่คุณเห็นข้อความค้นหาของสื่อสามารถช่วยให้เราสร้างประสบการณ์ที่น่าสนใจได้ - และฉันได้สัมผัสเพียงพื้นผิวเท่านั้น หากคุณกำลังมองหาการอ่านก่อนนอนแบบเบา ๆ คุณอาจทำได้แย่กว่าการอ่านข้อกำหนดการสืบค้นสื่อ W3C ซึ่งอธิบายคุณลักษณะทั้งหมดที่เราสามารถทดสอบได้
03. อีกอย่างหนึ่ง…
แม้ว่าเราจะรวมข้อความค้นหาสื่อไว้ใน CSS ของเรา แต่หากเราดูไซต์ของเราบนอุปกรณ์เคลื่อนที่คุณจะสังเกตเห็นว่าไซต์ของเรายังคงแสดงผลราวกับว่าหน้าจอกว้างกว่า 768px
เพื่อให้เข้าใจว่าเหตุใดจึงเกิดขึ้นเราจำเป็นต้องเรียนรู้ประวัติศาสตร์โดยย่อ
เมื่อ iPhone รุ่นดั้งเดิมได้รับการประกาศในปี 2550 จุดขายที่สำคัญอย่างหนึ่งคือความสามารถในการเรียกดู "เว็บจริง" แม้ว่าจะหมายถึงไซต์ที่เน้นเดสก์ท็อปที่มีความกว้างคงที่ซึ่งจำเป็นต้องลดขนาดลงเพื่อให้พอดีกับหน้าจอขนาดเล็กก็ตาม iPhone สามารถทำได้โดยรายงานการแสดงผลว่ามีความกว้าง 980px ก่อนที่จะปรับขนาดหน้าเว็บให้พอดีกับหน้าจอกว้าง 320px
แต่ iPhone ได้รับการแนะนำก่อนการมาถึงของการออกแบบที่ตอบสนอง ขณะนี้ผู้เขียนกำลังออกแบบไซต์ที่ออกแบบมาสำหรับมือถือคุณลักษณะนี้มีประโยชน์น้อย โชคดีที่ Apple ได้รวมวิธีการหลีกเลี่ยงพฤติกรรมนี้และเนื่องจากมีการนำมาใช้โดยผู้ผลิตรายอื่นจึงเกือบจะกลายเป็น พฤตินัย มาตรฐาน. มันเกี่ยวข้องกับการเพิ่มไฟล์ เมตา องค์ประกอบของมาร์กอัปของเรา:
meta name = "viewport" content = "initial-scale = 1.0, width = device-width" />
สิ่งนี้จะบอกเบราว์เซอร์ที่รับรู้วิวพอร์ตว่าไม่ควรลดขนาดเว็บไซต์และความกว้างของหน้าต่างเบราว์เซอร์ควรได้รับการปฏิบัติเช่นเดียวกับความกว้างของอุปกรณ์โดยรวม เมื่อเราเพิ่มบรรทัดนี้แล้วเว็บไซต์ของเราจะปรากฏขึ้นพร้อมกับรูปแบบที่ต้องการ:
04. การเลือกจุดพัก
กลับไปที่แบบสอบถามสื่อของเรา:
หน้าจอ @media และ (ความกว้างต่ำสุด: 768px) {
...
}
ค่าที่เค้าโครงปรับเปลี่ยนโดยทั่วไปเรียกว่าเบรกพอยต์ ถ้าคุณจำได้ในตอนที่สองฉันบอกว่าการใช้พิกเซลเป็นการบ่งบอกถึงความคิดที่ไม่ตอบสนอง แต่ที่นี่ฉันเลือก 768px อาจเป็นเพราะความกว้างของอุปกรณ์ที่คุ้นเคย
แทนที่จะเลือกเบรกพอยต์ตามลักษณะของอุปกรณ์ยอดนิยมการดูค่าที่ได้มาจากเนื้อหาของเราจะมีประสิทธิภาพมากกว่าเช่นความยาวบรรทัดที่สะดวกสบายสำหรับการอ่านหรือขนาดสูงสุดของรูปภาพ
เนื่องจากประเภทของเรามีขนาดโดยใช้ ems ดูเหมือนว่าเหมาะสมสำหรับการสืบค้นสื่อของเราที่จะใช้ ems เช่นกัน ในความเป็นจริงการทำเช่นนั้นมีประโยชน์เพิ่มเติม เมื่อผู้ใช้ปรับขนาดข้อความในเบราว์เซอร์เพจต่างๆจะปรับให้ใช้เบรกพอยต์ที่เล็กลง เว็บไซต์ของเราไม่เพียง แต่จะปรับตามขนาดของวิวพอร์ตเท่านั้น แต่ยังรวมถึงขนาดของตัวอักษรด้วย ในความเป็นจริงมันก็ต่อเมื่อฉันเห็น Jeremy Keith สาธิตการสืบค้นจากสื่อ em-based เท่านั้นที่ฉันตระหนักได้ว่าพวกเขามีพลังมากเพียงใด
แม้ว่าการออกแบบของเราอาจบ่งบอกถึงจุดพักที่เป็นไปได้ แต่บ่อยครั้งวิธีที่ดีที่สุดในการเลือกคือการทดลอง ด้วยการปรับความกว้างของหน้าต่างเบราว์เซอร์ฉันได้ตัดสินใจแล้วว่า 800px เป็นความกว้างที่ดีที่จะเปลี่ยนไปใช้เลย์เอาต์ที่ซับซ้อนมากขึ้น
เราจะแสดง 800px ใน ems ได้อย่างไร? อีกครั้งเราสามารถใช้สูตรของเราได้ แต่บริบทคืออะไร? เมื่อคำนวณ ems สำหรับคิวรีสื่อบริบทจะเป็นขนาดฟอนต์เริ่มต้นของเบราว์เซอร์เสมอ ไม่ว่าค่านี้จะถูกแทนที่ใน CSS ของคุณหรือไม่. ค่าเริ่มต้นนี้โดยทั่วไปคือ 16px ซึ่งทำให้เรา:
800 / 16 = 50
ตอนนี้เราสามารถอัปเดตแบบสอบถามสื่อของเราได้ดังนี้:
หน้าจอ @media และ (ความกว้างต่ำสุด: 50em) {/ * 800px * /
...
}
05. การปรับภาพขนาดย่อของเรา
คุณจะจำได้ว่าในตอนที่ 2 เราได้ออกแบบภาพขนาดย่อของเราให้ตอบสนอง เมื่อภาพภายในภาพขนาดย่อเหล่านี้มีขนาดเต็มความกว้างพื้นที่สีขาวจะปรากฏขึ้นทางด้านขวาของแต่ละภาพ อีกครั้งการสืบค้นสื่อช่วยให้เราแก้ไขปัญหานี้ได้
นี่คือ CSS ดั้งเดิมของเรา:
ol.media li.media-item {
สีพื้นหลัง: #fff;
มาร์จิ้น: 0 4.16666666667% 4.16666666667% 0;
ความกว้าง: 47.91666666667%;
ลอย: ซ้าย;
}
ol.media li.media-item: nth-child (2n) {
ขอบขวา: 0;
}
จุดที่ช่องว่างสีขาวนี้ปรากฏขึ้นก็เท่ากับว่าเบราว์เซอร์ขยายกว้างขึ้นกว่า 560pxเราจะเลือกค่านี้เพื่อสลับเป็นการแสดงภาพขนาดย่อสามภาพต่อแถว เราสามารถทำได้โดยเพิ่ม CSS ต่อไปนี้:
หน้าจอ @media และ (ความกว้างต่ำสุด: 35em) {
.media-item {
ความกว้าง: 30.612244897959%; / * 240/784 * /
ขอบ: 0 4.081632653061% 1.1429em 0; / * 0 32/784 16px 0 * /
}
.media-item: nth-child (3n) {
ขอบขวา: 0;
}
}
โปรดทราบว่าเราไม่จำเป็นต้องเขียนรูปแบบใหม่ทั้งหมดที่จำเป็นสำหรับภาพขนาดย่อภายในแบบสอบถามสื่อนี้เฉพาะส่วนที่เราต้องการปรับเปลี่ยน
เมื่อดูการเปลี่ยนแปลงนี้ในเบราว์เซอร์คุณจะทราบว่าไม่มีขอบด้านขวาของภาพขนาดย่อทุกวินาที เนื่องจากกฎ CSS ต่อไปนี้ยังคงทำงานอยู่:
ol.media li.media-item: nth-child (2n) {
ขอบขวา: 0;
}
เราจำเป็นต้องแก้ไข CSS ภายในแบบสอบถามสื่อของเราเพื่อรีเซ็ตค่านั้น:
หน้าจอ @media และ (ความกว้างต่ำสุด: 35em) {
.media-item {
ความกว้าง: 30.612244897959%; / * 240/784 * /
ขอบ: 0 4.081632653061% 1.1429em 0; / * 0 32/784 16px 0 * /
}
.media-item: nth-child (2n) {
ขอบขวา: 4.081632653061%;
}
.media-item: nth-child (3n) {
ขอบขวา: 0;
}
}
เมื่อสร้างแบบสอบถามสื่อโปรดระวังปัญหาการถ่ายทอดทางพันธุกรรมเช่นนี้เสมอ
06. ไม่ใช่แค่ความกว้าง
สิ่งสำคัญคือต้องคำนึงถึงข้อความค้นหาของสื่อไม่เพียง แต่ในแง่ของความกว้างเท่านั้น แต่ยังมีตัวแปรอื่น ๆ ด้วย ตัวอย่างเช่นวิดีโอในหน้ารายการสื่อของเราถูกซ่อนไว้บางส่วนเมื่อความสูงของวิวพอร์ตลดลง เรามีเทคโนโลยี:
.media-object-wrapper {
padding-bottom: 56.25%;
ความกว้าง: 100%;
ความสูง: 0;
ตำแหน่ง: ญาติ;
}
หน้าจอ @media และ (ความสูงสูงสุด: 35em) และ (การวางแนว: แนวนอน) {/ * 560px * /
.media-object-wrapper {
ความกว้าง: 60%;
padding-bottom: 33.75%;
}
}
ฉันได้รวมแบบสอบถามการวางแนวไว้เพื่อปรับพฤติกรรมนี้เพิ่มเติม
เราสามารถทำตามแนวทางที่คล้ายกันสำหรับส่วนอื่น ๆ ของการออกแบบของเราโดยสลับในส่วนหัวเวอร์ชันที่ใหญ่กว่าและย้ายลิงก์การนำทางไปที่ด้านบนสุดของหน้าเมื่อมีพื้นที่ว่าง
- ดูหน้าแรกที่ตอบสนองของเรา
- ดูหน้ารายการสื่อที่ตอบสนองของเรา
และเรามี! เราได้สร้างเว็บไซต์ที่ตอบสนอง - และเหลือเวลาอีก 1 วัน! ก็ไม่เชิง เค้าโครงรูปภาพและแบบสอบถามสื่อที่ยืดหยุ่นเป็นเพียงจุดเริ่มต้นของกระบวนการออกแบบที่ตอบสนองเท่านั้น
พรุ่งนี้: ในส่วนสุดท้ายของบทช่วยสอนนี้เราจะไปไกลกว่าการออกแบบเว็บที่ตอบสนองและดูว่าเราจะสร้างเว็บไซต์ที่ตอบสนองอย่างแท้จริงได้อย่างไร
Paul เป็นนักออกแบบปฏิสัมพันธ์ที่อยู่ในเมืองไบรตันประเทศอังกฤษ เขามีความสุขที่สุดเมื่อสร้างอินเทอร์เฟซที่เรียบง่าย แต่น่าสนใจซึ่งมีอยู่ในเว็บ
