คำแนะนำง่ายๆ ในการสร้างเว็บไซต์ที่ตอบสนองตามอุปกรณ์

คุณเคยสงสัยหรือไม่ว่าเว็บไซต์สมัยใหม่จำนวนเท่าใดที่ดูเหมือนจะ 'พอดี' ได้อย่างสมบูรณ์แบบ ไม่ว่าคุณจะใช้อุปกรณ์ใดในการดู การเข้ารหัสหน้าเว็บแบบตอบสนองเป็นแนวทางปฏิบัติทั่วไปที่แพร่หลายไปทั่วเว็บไซต์ใหม่ๆ ในปัจจุบัน หน้าเว็บที่ตอบสนองตามอุปกรณ์จะใช้กลอุบายอันชาญฉลาดโดยปรับขนาดตัวเองให้พอดีกับหน้าจอของอุปกรณ์ที่ใช้ดูเว็บไซต์ นั่นหมายความว่ามันดูดีบน iPhone หรือคอมพิวเตอร์เดสก์ท็อปและทุกสิ่งที่อยู่ระหว่างนั้น

'การตอบสนอง' นี้เกิดขึ้นได้อย่างลงตัวจนคุณอาจไม่ได้สังเกตเลยด้วยซ้ำ การออกแบบเว็บที่ตอบสนองได้ดีควรจะไหลลื่นจากอุปกรณ์หนึ่งไปอีกอุปกรณ์หนึ่ง ในขณะเดียวกันก็รับประกันประสบการณ์การท่องเว็บที่ดีที่สุด เว็บไซต์ที่ตอบสนองได้เปลี่ยนจากการเป็นคุณลักษณะ 'น่ามี' ไปเป็นบางสิ่งที่ตอนนี้แทบจำเป็นสำหรับเว็บไซต์ใดๆ ทำไม ค่อนข้างง่ายเพราะตอนนี้ผู้คนจำนวนมากที่ใช้อุปกรณ์เคลื่อนที่เพื่อท่องเว็บออนไลน์ได้เพิ่มขึ้นในช่วงไม่กี่ปีที่ผ่านมา และแนวโน้มที่มีต่ออุปกรณ์พกพา (และหน้าจอที่เล็กกว่า) นี้ไม่ได้แสดงให้เห็นว่ามีการชะลอตัว

ดูข้อมูลด้านล่าง (ได้รับความอนุเคราะห์จาก statcounter.com) คุณจะเห็นว่าขนาดหน้าจอที่แพร่หลายที่สุดคือขนาดเล็ก (เช่น หน้าจอมือถือ)

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

หากการสูญเสียผู้มีโอกาสเป็นลูกค้าไม่เพียงพอที่จะโน้มน้าวคุณถึงคุณค่าของการมีเว็บไซต์ที่ตอบสนองได้ดี ความคิดที่จะสูญเสียอันดับการค้นหาก็อาจเป็นเช่นนั้น Google มีบางเว็บไซต์ที่ถูกลงโทษซึ่งไม่ได้นำเสนอรูปแบบการตอบสนองหรือการออกแบบที่ปรับเปลี่ยนได้สำหรับผู้ใช้มือถือ นั่นหมายความว่าหากเว็บไซต์ของคุณใช้งานบนมือถือได้ไม่ดีนัก ก็คาดหวังว่าจะได้รับบทลงโทษอันดับ 'ทำงานได้ดี' บนมือถือหมายความว่าอย่างไร เนื้อหาต้องแสดงในลักษณะที่เป็นมิตรกับผู้ใช้ ซึ่งหมายความว่าต้องสามารถอ่านได้โดยไม่ต้องบีบนิ้วและซูมเข้า นอกจากนี้ยังต้องโหลดอย่างรวดเร็ว (สนใจว่า WordPress Caching สามารถช่วยในเรื่องความเร็วได้อย่างไร ดูที่บทความ 'WordPress Caching – วิธีการทำงานและทำไมคุณจึงควรใช้ !')

หน้าเว็บที่ตอบสนองและหน้าเว็บแบบปรับเปลี่ยนได้

ถ้าเราย้อนกลับไปเมื่อหนึ่งหรือสองทศวรรษที่ผ่านมา โทรศัพท์มือถือก็แทบไม่แพร่หลายเหมือนตอนนี้ แน่นอนว่าคนที่ทำงานได้ดีในการอนุญาตให้คุณท่องเว็บไม่ได้เริ่มมาถึงในปี 2548 เป็นต้นไป (ไม่น่าเชื่อว่า iPhone จะไม่มาถึงที่เกิดเหตุจนถึงปี 2550) เครือข่ายมือถือไม่สามารถรับข้อมูลได้มาก ซึ่งหมายความว่ามีโอกาสจำกัดในการท่องเว็บบนมือถือ ที่มีการเปลี่ยนแปลงอย่างรวดเร็วในช่วงทศวรรษที่ผ่านมาและเว็บไซต์ต่าง ๆ ถูกทิ้งให้เล่นตามเพื่อให้บริการลูกค้าได้ดีขึ้นในโลกใหม่ที่ขับเคลื่อนด้วยมือถือซึ่งเราพบตัวเองในปัจจุบัน

มีหลายวิธีที่นักออกแบบเว็บไซต์ทำงานเพื่อแก้ปัญหาความจำเป็นในการปรับเว็บไซต์ 'เดสก์ท็อป' ให้พอดีกับหน้าจอมือถือ ในช่วงแรก ๆ เว็บไซต์ 'มือถือเท่านั้น' แบบสแตนด์อโลนได้รับการพัฒนาซึ่งทำงานควบคู่ไปกับเว็บไซต์หลักในเวอร์ชัน 'เดสก์ท็อป' โดยทั่วไปแล้วสิ่งเหล่านี้มีการออกแบบที่ค่อนข้างหยาบและมักจะให้ประสบการณ์การท่องเว็บแบบถอดได้ซึ่งละเว้นคุณสมบัติมากมายของพี่น้องเดสก์ท็อปที่ใหญ่กว่า

หลังจากนั้น Adaptive Design ก็มาถึงที่เกิดเหตุ การดำเนินการนี้ทำให้เวอร์ชันสำหรับมือถือเท่านั้นในการให้บริการเว็บไซต์บนมือถือที่ออกแบบมาเป็นพิเศษไปอีกขั้น มีการสร้างเลย์เอาต์คงที่หลายแบบซึ่งมอบประสบการณ์การท่องเว็บบนมือถือที่น่าสนใจยิ่งขึ้นสำหรับผู้ใช้ โหลดขนาดหน้าจอของอุปกรณ์ที่ใช้เว็บไซต์และมีขนาดที่เหมาะสมที่สุด โดยทั่วไปแล้วจะมีการสร้างหกขนาดเพื่อรองรับหน้าจอตั้งแต่เดสก์ท็อปขนาดใหญ่ไปจนถึงมือถือ อย่างไรก็ตาม การออกแบบที่ปรับเปลี่ยนได้นั้นค่อนข้างจำกัดและไม่สามารถพิสูจน์ได้ในอนาคต เนื่องจากไม่สามารถรองรับขนาดหน้าจอที่ไม่จัดอยู่ในชุด 6 หมวดหมู่ที่สร้างขึ้นอย่างเรียบร้อย นอกจากนี้ยังใช้ทรัพยากรที่เข้มข้นจากมุมมองของการออกแบบเนื่องจากต้องสร้างเว็บไซต์ 6 เวอร์ชัน

ข้อเสียเปรียบหลักเกี่ยวกับการออกแบบที่ปรับเปลี่ยนได้ได้รับการแก้ไขด้วยการออกแบบที่ตอบสนอง แทนที่จะแสดงเลย์เอาต์ที่สร้างไว้ล่วงหน้าตามขนาดหน้าจอ การออกแบบที่ตอบสนองจะปรับเปลี่ยนวิธีการเรนเดอร์ตามอุปกรณ์ ซึ่งหมายความว่าคุณควรจะได้เว็บไซต์ที่ดูดีและเป็นมิตรกับผู้ใช้ไม่ว่าจะใช้อุปกรณ์ใด (และขนาดหน้าจอที่สอดคล้องกัน) ในการดูเว็บไซต์

การออกแบบที่ตอบสนองตามอุปกรณ์ถือเป็นมาตรฐานอุตสาหกรรมสำหรับเว็บไซต์บนมือถือ อันที่จริง Google เองก็แนะนำ Responsive Web Design ในบทช่วยสอนนี้ เราจะให้ผู้เริ่มต้นดูการออกแบบที่ตอบสนองและวิธีนำไปใช้กับการออกแบบเว็บไซต์ของคุณ

เว็บไซต์ที่ตอบสนองทำงานอย่างไร

เว็บไซต์ที่ตอบสนองจะใช้สิ่งที่เรียกว่า CSS Media Queries เพื่อแก้ไขเลย์เอาต์ของเว็บไซต์ตามความกว้างของหน้าจอ CSS Media Queries เป็นเครื่องมือที่ทรงพลังซึ่งค่อนข้างง่ายในการปรับใช้ถ้าคุณมีความเข้าใจพื้นฐานเกี่ยวกับ CSS จุดเริ่มต้นก่อนที่คุณจะดำดิ่งสู่กระบวนการสร้างเว็บไซต์ตอบสนองคือการดูตัวอย่างสดสองสามตัวอย่าง วิธีที่ดีที่สุดคือบนหน้าจอเดสก์ท็อปหรือแล็ปท็อป เปิดเบราว์เซอร์ เช่น Chrome แล้วไปที่เว็บไซต์ยอดนิยม คุณอาจต้องการลองของเราเองที่ pressidium.com

ลดขนาดหน้าต่างเบราว์เซอร์ จากนั้นวางเมาส์เหนือขอบด้านขวาของหน้าต่างเบราว์เซอร์ เริ่มเลื่อนหน้าต่างให้แคบลง คุณจะเห็นว่าเมื่อมีขนาดเล็กลง เลย์เอาต์ของเว็บไซต์ก็เปลี่ยนไป สิ่งที่เกิดขึ้นคือเมื่อเว็บไซต์ถึงขนาดที่กำหนดไว้ล่วงหน้า (เช่น กว้าง 1,000px) CSS Media Query จะทำงานเพื่อบอกให้เบราว์เซอร์ใช้สไตล์ CSS ที่เกี่ยวข้องกับความกว้างของหน้าจอนี้ จากนั้นเว็บไซต์จะไหลลื่นหรือตอบสนองต่อขนาดหน้าจอใหม่นี้อย่างงดงามและแสดงตามนั้น ฉลาดมาก!

ตอนนี้เรามีความเข้าใจพื้นฐานเกี่ยวกับสิ่งที่เกิดขึ้นแล้ว มาเจาะลึกประเด็นสำคัญและดูว่าเราจะสร้างหน้าเว็บที่ตอบสนองด้วยตัวเองได้อย่างไร

การสร้างหน้าเว็บที่ตอบสนอง

เราจะไม่ใช้แบ็กเอนด์โค้ดใดๆ ในบทช่วยสอนนี้ ดังนั้นจึงไม่จำเป็นต้องเข้าถึงเซิร์ฟเวอร์เพื่อลองใช้งาน เพียงสร้างโฟลเดอร์บนเดสก์ท็อปของคุณ และเพิ่มไฟล์การทำงานของคุณลงในสิ่งนี้

ขั้นตอนที่ 1: HTML

สร้างไฟล์ index.html ภายในโฟลเดอร์ใหม่ของคุณ เปิดไฟล์นี้ด้วยโปรแกรมแก้ไขข้อความ/โค้ดที่คุณชื่นชอบ แล้วใส่โค้ดต่อไปนี้:

 <!DOCTYPE html> <html lang="en-US"> <head> <link rel="stylesheet" type = "text/css" href = "style.css" /> </head> <body> <div> <div> <h1>My website</h1> <div> <div class="post"> <h3 class="post-title">Post 1 title</h3> <p><b>post 1 content.</b> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> </div> <div class="post"> <h3 class="post-title">Post 2 title</h3> <p><b>post 2 content.</b> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> </div> <div class="post"> <h3 class="post-title">Post 3 title</h3> <p><b>post 3 content.</b> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> </div> <div class="post"> <h3 class="post-title">Post 4 title</h3> <p><b>post 4 content.</b> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> </div> <div class="post"> <h3 class="post-title">Post 5 title</h3> <p><b>post 5 content.</b> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> </div> </div> <div> <div> <h3>Menu title</h3> <ul> <li>item 1</li> <li>item 2</li> <li>item 3</li> <li>item 4</li> </ul> </div> </div> </div> </div> </body> </html>

ขั้นตอนที่ 2: CSS ภายนอก

คุณจะต้องเพิ่มไฟล์ style.css ภายนอก ในการดำเนินการนี้ ให้สร้างไฟล์ชื่อ style.css และวางไว้ในโฟลเดอร์เดียวกับไฟล์ index.html ของคุณ จากนั้นเพิ่มรหัสต่อไปนี้:

 h1 { text-align: center; } div#content { margin: 0 auto; display: table; } div#main { width: 900px; float: left; padding: 20px; margin: 20px; border: 1px solid darkgrey; } div#sidebar { width: 300px; float: left; padding: 20px; margin: 20px; border: 1px solid darkgrey; } div.post { width: 31.1%; float: left; padding: 10px; }

ณ จุดนี้ หากคุณเปิดไฟล์ index.html ด้วยอินเทอร์เน็ตเบราว์เซอร์ของคุณ (เราใช้ Chrome ในตัวอย่างนี้) สิ่งที่คุณควรเห็นบนหน้าเว็บของคุณจะเป็นดังนี้:

ตอนนี้ มาดูเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ของเบราว์เซอร์ของเรา (เช่น เราใช้ Chrome สำหรับตัวอย่างนี้อีกครั้ง) เปิด Chrome แล้วกด F12 แล้วตั้งค่าให้ดูทางด้านขวา

เปลี่ยนขนาดหน้าต่างโดยเลื่อนเคอร์เซอร์คั่นและดูความละเอียดของหน้าจอที่เปลี่ยนไปตามเวลาจริง

ขั้นตอนที่ 3: CSS Relative Units

ในตัวอย่างของเรา คุณจะเห็นว่าหากคุณลากไปที่ความกว้าง 1396px คุณจะสังเกตเห็นว่าแถบด้านข้างขวาพร้อมเมนูจะย้ายไปด้านล่างเนื้อหาหลักเนื่องจากจะไม่พอดีอีกต่อไป

ที่เกิดขึ้นเพราะเราได้ตั้งค่าความกว้างคงที่ 900px บน div#main และ 300px บน div#sidebar มาเปลี่ยนรูปแบบของค่าเหล่านี้และใช้เปอร์เซ็นต์แทนกัน (โปรดทราบว่าช่องว่างภายในและระยะขอบจะนับตามความกว้างด้วย ดังนั้นค่าเหล่านี้จึงต้องแปลงเป็นเปอร์เซ็นต์ด้วย)

เมื่อคุณทำการแก้ไขเหล่านี้แล้ว style.css ควรมีลักษณะดังนี้:

 h1 { text-align: center; } div#content { margin: 0 auto; display: table; } div#main { width: 66%; float: left; padding: 1%; margin: 1%; border: 1px solid darkgrey; } div#sidebar { width: 22%; float: left; padding: 1%; margin: 1%; border: 1px solid darkgrey; } div.post { width: 31.1%; float: left; padding: 10px; }

ตอนนี้เริ่มน่าตื่นเต้นแล้วเนื่องจากเรามีเพจที่ตอบสนองมากขึ้น!

แม้ว่าสิ่งต่าง ๆ กำลังก่อตัว แต่พื้นที่โพสต์ก็ต้องการการแก้ไข CSS เพิ่มเติม ยิ่งความกว้างของตู้ไปรษณีย์ "น่าเกลียด" น้อยลงเท่านั้น ในการแก้ไขปัญหานี้ เราต้องแก้ไข CSS ของโพสต์เพื่อให้ได้เลย์เอาต์ที่สวยงามและตอบสนองมากขึ้น

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

สิ่งที่เรากำลังจะลองทำคือแปลงพื้นที่โพสต์ 'หน้าจอกว้าง' 3 คอลัมน์ของเราเป็นพื้นที่ 2 คอลัมน์ที่จะพอดีกับหน้าจอที่แคบกว่า เพื่อให้บรรลุสิ่งนี้ เราใช้การสืบค้นสื่อ CSS

ขั้นตอนที่ 4: CSS Media Queries

สำหรับโหมด 'จอกว้าง' ของเรา เราจะแนะนำการสืบค้นสื่อ CSS แบบนี้ เช่น @media screen and (min-width: 1396px) ข้อความค้นหานี้อยู่ที่ด้านบนสุดของสไตล์ชีต CSS และล้อมรอบชุด CSS ทั้งหมดที่เราต้องการเรียกใช้เมื่อหน้าจอของเรากว้างอย่างน้อย 1396px

ตอนนี้เราสามารถคัดลอกโค้ดทั้งหมดนี้และทำซ้ำได้ในสไตล์ชีต CSS ของเรา (คัดลอกและวางไว้ด้านล่าง CSS ปัจจุบันเพื่อให้คุณมีเวอร์ชันที่เหมือนกันสองเวอร์ชันในไฟล์เดียว) ตอนนี้ แก้ไขคิวรีสื่อ CSS ที่ด้านบนสุดของชุดที่สองของ CSS เพื่ออ่าน @media screen and (max-width: 1395px) สิ่งนี้กำลังบอกเบราว์เซอร์ของเราว่าหากมี ขนาดเล็ก กว่า 1395px ก็ควรเรียกใช้ CSS นี้ เสร็จแล้ว เราสามารถปรับแต่ง CSS ได้ในส่วน 'เล็ก' นี้ เพื่อให้ปรับเปลี่ยนเลย์เอาต์ของหน้าเว็บของเราเพื่อให้พอดีกับหน้าจอที่เล็กกว่า ในตัวอย่างนี้ เราจะปรับแต่ง และเราควรปรับเปอร์เซ็นต์ div.post จาก 31.1% เป็น 45%

ตอนนี้คุณควรมีไฟล์ CSS ที่มีลักษณะดังนี้:

 @media screen and (min-width: 1396px) { h1 { text-align: center; } div#content { margin: 0 auto; display: table; } div#main { width: 66%; float: left; padding: 1%; margin: 1%; border: 1px solid darkgrey; } div#sidebar { width: 22%; float: left; padding: 1%; margin: 1%; border: 1px solid darkgrey; } div.post { width: 31.1%; float: left; padding: 10px; } } @media screen and (max-width: 1395px) { h1 { text-align: center; } div#content { margin: 0 auto; display: table; } div#main { width: 66%; float: left; padding: 1%; margin: 1%; border: 1px solid darkgrey; } div#sidebar { width: 22%; float: left; padding: 1%; margin: 1%; border: 1px solid darkgrey; } div.post { width: 45%; float: left; padding: 2%; } }

ตอนนี้กล่องโพสต์มีสไตล์ที่แตกต่างกันสำหรับหน้าจอที่มีความกว้างน้อยกว่า 1395px เรามาดูกันว่าสิ่งนี้สะท้อนถึงการใช้งานจริงอย่างไร:

ดี!

คุณจะสังเกตเห็นว่าสิ่งต่าง ๆ ยังคงแปลกประหลาดในขณะที่ลดขนาดลงและหลังจากข้ามความกว้าง 760px

ในการจัดเรียงข้อมูลนี้ เราสามารถใช้เคล็ดลับเดียวกันกับที่เราเคยเปลี่ยนจาก 3 คอลัมน์เป็น 2 คอลัมน์ คราวนี้แม้ว่าเราจะใช้ 'เบรกพอยต์' ที่ 760px และจะเปลี่ยน CSS div.post เป็น 94% หากเราทำเช่นนี้ เราจะมีข้อความค้นหาสื่อ CSS สามรายการซึ่งควรมีลักษณะดังนี้:

 @media screen and (min-width: 1396px) { } @media screen and (min-width: 761px) and (max-width: 1395px) { } @media screen and (max-width: 760px) { }

@media screen and (max-width: 760px) จะรวม div.post ที่แก้ไขแล้วซึ่งจะมีลักษณะดังนี้:

 div.post { width: 94%; float: left; padding: 2%; }

สบายดี คุณควรเห็นสิ่งต่อไปนี้เมื่อคุณลดความกว้างของเบราว์เซอร์ให้ต่ำกว่า 760px:

และนั่นแหล่ะ! ตอนนี้เราได้สร้างหน้าเว็บแบบตอบสนองที่ทำงานบนหน้าจอขนาดใหญ่ แท็บเล็ตและโทรศัพท์มือถือ!

การใช้เทมเพลตนี้มีการเล่นและทดลองกับสไตล์ CSS อื่นๆ มากขึ้น มีหลายสิ่งให้เรียนรู้โดยลองใช้ตัวอย่างนี้และใช้กฎ CSS ต่างๆ ที่สามารถใช้สร้างเว็บไซต์ที่สวยงามและตอบสนองได้ในภายหลัง

โฮสต์เว็บไซต์ของคุณด้วย Pressidium

รับประกันคืนเงิน 60 วัน

ดูแผนของเรา

บทสรุป

หากคุณกำลังใช้ CMS เช่น WordPress คุณอาจสงสัยว่าเหตุใดจึงจำเป็นต้องเจาะลึก CSS และคิวรี่สื่อที่ส่งไปยังหน้าเว็บที่ตอบสนอง ท้ายที่สุดแล้ว ธีม WordPress ที่มีการเข้ารหัสอย่างเหมาะสมควรมีการออกแบบที่ตอบสนองในตัวอยู่แล้ว แม้ว่าสิ่งนี้จะเป็นความจริง การทำความเข้าใจว่าทำไมเว็บไซต์ถึงดำเนินการตามความกว้างของเบราว์เซอร์อาจเป็นประโยชน์อย่างมาก อาจมีบางครั้งที่การออกแบบตอบสนองเริ่มต้นที่เพิ่มโดยผู้สร้างธีมไม่ทำงานตามที่คุณต้องการเช่นกัน เมื่อรู้วิธีใช้การสืบค้นข้อมูลสื่อเพื่อแก้ไข CSS ที่จะแสดงที่จุดพักบางจุด คุณจะมีอิสระที่จะดำเนินการต่อและใช้การเปลี่ยนแปลงที่ส่งผลให้มีรูปลักษณ์และฟังก์ชันที่คุณต้องการ

และหากคุณเคยวางแผนที่จะสร้างธีม WordPress ของคุณเอง ความเข้าใจอย่างถ่องแท้เกี่ยวกับข้อความค้นหาสื่อก็เป็นสิ่งจำเป็นอย่างยิ่ง! หวังว่าบทความนี้จะช่วยให้คุณเห็นเบื้องหลังของเว็บไซต์ที่ตอบสนองในปัจจุบัน มีความสุขในการเข้ารหัสที่ตอบสนอง!