การออกแบบแบบปรับเปลี่ยนได้อย่างไร ค้นหาการออกแบบสำเร็จรูป การออกแบบที่ตอบสนองคืออะไร

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

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

คุณรู้หรือไม่ว่าผู้ใช้อุปกรณ์เคลื่อนที่เห็นเว็บไซต์ของคุณอย่างไร โชคดีที่มีบริการตรวจสอบที่ดีเยี่ยม - responsinator.com

ทุกอย่างที่นี่เรียบง่ายอย่างเหลือเชื่อ - คุณป้อนที่อยู่ไซต์และดูว่ามีลักษณะอย่างไรบนอุปกรณ์มือถือ มาดูตัวอย่างบล็อกที่ทุกคนคงคุ้นเคยกันดี

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

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

การออกแบบที่ตอบสนองคืออะไร

ในตอนแรก ฉันไม่เห็นความแตกต่างระหว่างเลย์เอาต์แบบปรับได้และแบบ "ลื่นไหล" เมื่อขนาดของบล็อกเปลี่ยนไปตามความกว้างของหน้าจอ อย่างไรก็ตามมีความแตกต่าง

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

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

วิธีสร้างการออกแบบที่ตอบสนองสำหรับเว็บไซต์ของคุณ

อาจมีหลายตัวเลือก ขึ้นอยู่กับงบประมาณและความรู้เกี่ยวกับ CSS/HTML ของคุณ

สั่งซื้อเค้าโครงแบบปรับเปลี่ยนได้จากฟรีแลนซ์

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

ค้นหาการออกแบบสำเร็จรูป

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

• www.templatemonster.com เป็นหนึ่งในคอลเลกชันเทมเพลตแบบชำระเงินที่ได้รับความนิยมมากที่สุดสำหรับ CMS ต่างๆ และเฉพาะไซต์ HTML
• www.templatemo.com - ตัวเลือกการออกแบบที่ทันสมัยฟรีมากมาย

ตัวเลือกนี้เหมาะสำหรับผู้ที่ไม่ได้ไล่ตามการออกแบบพิเศษหรือสามารถเปลี่ยนแปลงโค้ดของตนเองเพื่อทำให้เทมเพลตไม่ซ้ำใคร

ใช้กรอบงาน

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

คุณจะพบกับรายการเฟรมเวิร์กที่ปรับเปลี่ยนได้มากมายสำหรับทุกรสนิยมของ Habré แต่ส่วนใหญ่ใช้งานค่อนข้างยากและมีปริมาณมาก ดังนั้นสำหรับผู้ที่รักความเรียบง่าย ฉันขอแนะนำรายการเฟรมเวิร์กการปรับตัวแบบน้ำหนักเบาอีกรายการจาก Beloweb.ru ในขณะเดียวกัน ลองดูบล็อกให้ละเอียดยิ่งขึ้น มี "สารพัด" ที่มีประโยชน์มากมายสำหรับนักออกแบบและนักออกแบบเลย์เอาต์

จัดวางเลย์เอาท์ด้วยตัวเอง

วิธีนี้เหมาะสำหรับผู้ที่ไม่ได้มองหาวิธีง่ายๆ และต้องการคิดทุกอย่างด้วยตนเอง โดยพื้นฐานแล้ว เพื่อให้เทมเพลตของคุณตอบสนอง คุณต้องใช้สองสิ่ง:

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

@กฎสื่อ
ด้วยเหตุนี้เราจึงสามารถเขียนสไตล์ที่แตกต่างกันสำหรับบล็อกเดียวกันในไฟล์ css ของเราได้ มีลักษณะดังนี้:

#left( width: 600px; float: left; margin-right: 10px; ) #right( width: 400px; float: right; ) @media only screen และ (ความกว้างสูงสุด: 1010px)( #left, #right( width : 98%; float: ไม่มี; ระยะขอบ: 10px อัตโนมัติ;

ในตัวอย่างนี้ บล็อก #left มีความกว้าง 600 พิกเซล และจะอยู่ทางด้านซ้ายของบล็อก #right ที่มีความกว้าง 400 px แต่หากความละเอียดจอภาพน้อยกว่า 1,010 พิกเซล เราจะลบการห่อออกจากบล็อกทั้งสองและขยายเป็น 98% ของความกว้างหน้าจอ

และนี่คือวิธีที่คุณต้องเขียนกฎสำหรับขนาดหน้าจอต่อไปนี้:

• 320px สำหรับ iPhone 3-5 ในตำแหน่งแนวตั้ง
• 480px สำหรับ iPhone 3-4 ในตำแหน่งแนวนอน
• 568px สำหรับ iPhone 5 ในแนวนอน
• 384px สำหรับสมาร์ทโฟนในตำแหน่งแนวตั้ง
• 600px สำหรับสมาร์ทโฟนในตำแหน่งแนวนอน
• 768px สำหรับ iPad ในแนวนอน
• 1024px สำหรับ iPad ในตำแหน่งแนวตั้ง

คุณสามารถดูรายการวิธีแก้ปัญหาทั้งหมดได้ที่ responsinator.com หรือในรายงาน Yandex.Metrica สำหรับไซต์ของคุณ (หัวข้อเทคโนโลยี/ความละเอียดในการแสดงผล) ผู้ที่คุ้นเคยกับเค้าโครงเว็บไซต์จะเข้าใจปัญหานี้ได้ไม่ยาก

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

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

สวัสดีผู้เยี่ยมชมทั่วไปและผู้อ่านเว็บไซต์บล็อกเป็นประจำ!

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

โครงร่างโดยย่อของบทความ:

ในบทความก่อนหน้านี้ ฉันได้เขียนไปแล้วว่าทำไมและทำไมจึงจำเป็น แต่จะบรรลุความสามารถในการปรับตัวนี้ได้อย่างไร?

มีวิธีที่แตกต่างกันในการทำเช่นนี้ บางคนใช้จาวาสคริปต์ บางคนใช้อย่างอื่น แต่ฉันเชื่อว่าวิธีที่ง่ายและถูกต้องที่สุดคือการปรับตัวโดยใช้ CSS

วิธีสร้างเค้าโครงเว็บไซต์แบบตอบสนอง

ประการแรกหากคุณตัดสินใจที่จะสร้างการออกแบบเว็บไซต์แบบตอบสนอง ให้แทรกโค้ดต่อไปนี้ระหว่างแท็ก:

ฉันโง่จริงๆ ที่ฉันไม่ได้ทำสิ่งนี้ทันทีเมื่อฉันพยายามสร้างเลย์เอาต์เว็บไซต์ที่ปรับเปลี่ยนได้!!!
ปัญหาเกี่ยวกับเบราว์เซอร์มือถือคือการปรับขนาดเค้าโครงเว็บไซต์ แม้กระทั่งแบบปรับเปลี่ยนได้

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

ยังไงล่ะ? ฉันเริ่มตรวจสอบสไตล์ทั้งหมดอีกครั้งเพื่อดูว่าฉันเขียนคลาสถูกต้องหรือไม่ และในที่สุดก็มาถึงจุดที่ฉันตรวจสอบความกว้างของหน้าต่างเบราว์เซอร์ในหน่วย px โดยใช้ javascript ฉันตกใจมาก เมื่อตรวจสอบบนแล็ปท็อป ฉันได้รับผลลัพธ์ที่ 1024px และฉันก็ได้รับผลลัพธ์เดียวกันเมื่อเปิดไซต์บนสมาร์ทโฟน!

แต่นี่ไม่สามารถเป็นได้!

ปรากฎว่าหากคุณไม่ได้เขียนโค้ดที่ฉันระบุไว้ข้างต้น เบราว์เซอร์มือถือจะไม่เข้าใจว่าไซต์นั้นสามารถปรับเปลี่ยนได้ และพยายามลดขนาดหน้าไซต์ให้พอดีกับหน้าจอขนาดเล็กของโทรศัพท์มือถือ

เพราะความโง่เขลาและความไร้ความสามารถของฉัน ฉันจึงเสียเวลาไปมาก แต่ตอนนี้ฉันจำมันได้ตลอดไป)))

ข้อความค้นหาสื่อ CSS เค้าโครงที่ปรับเปลี่ยนได้

หากต้องการให้ตอบสนองโดยใช้ CSS คุณต้องใช้คำสั่งสื่อ

เป็นยังไงบ้าง? ใช่ ง่ายมาก ในไฟล์ CSS คุณต้องเขียนคำสั่งเช่น:

หน้าจอ @media และ (ความกว้างขั้นต่ำ: 1440px) และ (ความกว้างสูงสุด: 1599px)( )

รหัสนี้หมายความว่ารูปแบบที่อยู่ระหว่าง “( )” จะใช้ได้กับหน้าจอที่มีความกว้างขั้นต่ำ 1440px และสูงสุด 1599px

นั่นคือสไตล์ขององค์ประกอบของไซต์ที่ต้องปรับเปลี่ยนตามความละเอียดของหน้าจอจะต้องเขียนแยกกันสำหรับความกว้างของหน้าจอแต่ละอันที่เป็นไปได้

ความละเอียดหน้าจอที่สำคัญที่สุดสำหรับรูปแบบที่ปรับเปลี่ยนได้

• 320 px - อุปกรณ์เคลื่อนที่ (แนวตั้ง);
• 480 px - อุปกรณ์เคลื่อนที่ (แนวนอน);
• 600 px - แท็บเล็ตขนาดเล็ก
• 768 px - แท็บเล็ต (แนวตั้ง);
• 1024 px - แท็บเล็ต (แนวนอน)/เน็ตบุ๊ก;
• 1280 พิกเซลขึ้นไป - พีซี

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

การออกแบบที่ตอบสนองต่อบูตสแตรป

สะดวกมากในการใช้ bootstrap เพื่อสร้างเลย์เอาต์แบบปรับได้ ความสะดวกสบายคือทุกสไตล์ในการปรับแต่งบล็อค ปุ่ม ตาราง ฯลฯ ได้ลงทะเบียนใน bootstpap แล้ว คุณเพียงแค่ต้องพิจารณาว่าจะกำหนดคลาสใดให้กับองค์ประกอบใด

ในการเริ่มต้น ให้ดาวน์โหลด bootstrap เวอร์ชันล่าสุดและเชื่อมต่อกับเว็บไซต์ของคุณ โปรดทราบว่าการเชื่อมต่อสไตล์และสคริปต์กับ WordPress มีลักษณะเฉพาะของตัวเอง

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

ตัวอย่างเช่น การออกแบบนี้จะช่วยให้คุณสามารถจัดสรรบล็อกกว้างหนึ่งบล็อกสำหรับเนื้อหาที่มีความกว้าง 8 ส่วน และบล็อกแคบหนึ่งบล็อกสำหรับแถบด้านข้างที่มีความกว้าง 4 ส่วน:

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

คุณยังสามารถปรับระยะห่างของบล็อกจากขอบได้อีกครั้งตามจำนวนชิ้นส่วนที่ต้องการ ตัวอย่างเช่นการออกแบบนี้:

บล็อกที่มีความกว้าง 10 ส่วนจะถูกสร้างขึ้นโดยมีการเยื้องซ้าย 1 ส่วนของหน้าจอ

หากพิจารณาดูแล้ว การทำงานกับ bootstrap จะทำให้การทำงานรวดเร็วมาก นอกจากนี้สไตล์เหล่านี้ยังทำงานได้อย่างถูกต้องและจะไม่มีอะไรคดโกงบนไซต์

ในอนาคต ฉันวางแผนที่จะโพสต์บทเรียนหลายบทเกี่ยวกับการทำงานกับ bootsrap ดังนั้นผมแนะนำว่าอย่าพลาดช่วงเวลานี้

ตรวจสอบความสามารถในการปรับตัวของเว็บไซต์

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

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

คุณชอบบทความนี้อย่างไร? ทุกอย่างชัดเจนหรือไม่? ถ้าไม่เขียนความคิดเห็นเราจะคิดออกด้วยกัน

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

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

บทความนี้จะพิจารณาองค์ประกอบหลักของเว็บไซต์และวิธีการปรับใช้

การปรับความละเอียดหน้าจอ

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

เห็นได้ชัดว่าเราจะไม่สามารถออกแบบอุปกรณ์แต่ละเครื่องแยกกันต่อไปได้ แต่จะทำอย่างไร?

วิธีแก้ปัญหาบางส่วน: ทำให้ทุกอย่างมีความยืดหยุ่น

แน่นอนว่านี่ไม่ใช่วิธีการที่สมบูรณ์แบบ แต่ช่วยขจัดปัญหาส่วนใหญ่ได้

Ethan Marcotte สร้างเทมเพลตง่ายๆ ที่สาธิตการใช้เลย์เอาต์แบบตอบสนอง:

เมื่อมองแวบแรกอาจดูเหมือนทุกอย่างเป็นเรื่องง่าย แต่ก็ไม่เป็นเช่นนั้น ลองดูที่โลโก้:

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

องค์ประกอบ h1 มีรูปภาพเป็นพื้นหลัง และรูปภาพถูกจัดแนวให้ตรงกับพื้นหลังของคอนเทนเนอร์ (ส่วนหัว)

ภาพที่มีความยืดหยุ่น

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

Img (ความกว้างสูงสุด: 100%;)

ความกว้างสูงสุดของรูปภาพคือ 100% ของความกว้างของหน้าจอหรือหน้าต่างเบราว์เซอร์ ดังนั้นยิ่งความกว้างเล็กลง รูปภาพก็จะยิ่งเล็กลง โปรดทราบว่า IE ไม่รองรับความกว้างสูงสุด ดังนั้นให้ใช้ width: 100%

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

อีกวิธีหนึ่ง: รูปภาพที่ตอบสนอง

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

เทคนิคนี้ต้องใช้ไฟล์หลายไฟล์บน Github ก่อนอื่นเราใช้ไฟล์ JavaScript ( rwd-images.js), ไฟล์ .htaccessและ rwd.gif(ไฟล์รูปภาพ) จากนั้นเราจะใช้ HTML เพื่อเชื่อมโยงความละเอียดขนาดใหญ่และขนาดเล็ก อันดับแรกคือรูปภาพขนาดเล็กที่มีคำนำหน้า .ร(เพื่อแสดงว่ารูปภาพควรตอบสนอง) จากนั้นลิงก์ไปยังรูปภาพขนาดใหญ่โดยใช้ data-fullsrc:

สำหรับหน้าจอใดๆ ที่กว้างกว่า 480 พิกเซล รูปภาพที่มีความละเอียดสูงกว่าจะถูกโหลด ( largeRes.jpg) และบนหน้าจอขนาดเล็ก มันจะโหลด ( SmallRes.jpg).

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

เพื่อแก้ไขปัญหานี้ ให้ใช้เมตาแท็ก:

หากขนาดเริ่มต้นเท่ากับหนึ่ง ความกว้างของรูปภาพจะเท่ากับความกว้างของหน้าจอ

โครงสร้างเค้าโครงหน้าที่ปรับแต่งได้

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

ตัวอย่างเช่น คุณมีไฟล์สไตล์หลักที่ระบุ #wrapper , #content , #sidebar , #nav พร้อมด้วยสี พื้นหลัง และแบบอักษร หากสไตล์หลักของคุณทำให้เลย์เอาต์ของคุณแคบ สั้น กว้าง หรือสูงเกินไป คุณสามารถระบุสิ่งนั้นและรวมสไตล์ใหม่เข้าไปด้วย

style.css (หลัก):

/* สไตล์พื้นฐานที่จะสืบทอดมาจากชีตสไตล์ลูก */ html,body( พื้นหลัง... แบบอักษร... สี... ) h1,h2,h3() p, blockquote, pre, code, ol, ul () /* องค์ประกอบโครงสร้าง */ #wrapper( ความกว้าง: 80%; ระยะขอบ: 0 อัตโนมัติ; พื้นหลัง: #fff; การขยาย: 20px; ) #content ( ความกว้าง: 54%; ลอย: ซ้าย; ระยะขอบขวา: 3%; ) # แถบด้านข้างซ้าย ( กว้าง: 20%; ลอย: ซ้าย; ระยะขอบขวา: 3%; ) #แถบด้านข้างขวา ( กว้าง: 20%; ลอย: ซ้าย; )

mobile.css (ลูก):

#wrapper( width: 90%; ) #content( width: 100%; ) #sidebar-left( width: 100%; clear: ทั้งสอง; /* รูปแบบเพิ่มเติมสำหรับการออกแบบใหม่ */ border-top: 1px solid #ccc ; margin-top: 20px; ) #sidebar-right( width: 100%; clear: ทั้งสอง; /* สไตล์เพิ่มเติมสำหรับเค้าโครงใหม่ของเรา */ border-top: 1px solid #ccc; margin-top: 20px; )

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

ข้อความค้นหาสื่อ CSS3

มาดูกันว่าคุณสามารถใช้คิวรีสื่อ CSS3 เพื่อสร้างการออกแบบที่ตอบสนองได้อย่างไร min-width ระบุความกว้างขั้นต่ำของหน้าต่างหรือหน้าจอเบราว์เซอร์ที่จะใช้สไตล์บางสไตล์ หากค่าใดๆ ต่ำกว่า min-width สไตล์ต่างๆ จะถูกละเว้น max-width ตรงกันข้าม

หน้าจอ @media และ (ความกว้างขั้นต่ำ: 600px) ( .hereIsMyClass ( ความกว้าง: 30%; float: right; ) )

คิวรี่สื่อจะทำงานเฉพาะเมื่อความกว้างขั้นต่ำมากกว่าหรือเท่ากับ 600 พิกเซล

@media screen และ (ความกว้างสูงสุด: 600px) ( .aClassforSmallScreens ( ชัดเจน: ทั้งสอง; ขนาดตัวอักษร: 1.3em; ) )

ในกรณีนี้คลาส ( aClassforSmallscreens) จะทำงานเมื่อความกว้างของหน้าจอน้อยกว่าหรือเท่ากับ 600 พิกเซล

แม้ว่าความกว้างขั้นต่ำและความกว้างสูงสุดสามารถใช้ได้กับทั้งความกว้างของหน้าจอและความกว้างของหน้าต่างเบราว์เซอร์ เราอาจจำเป็นต้องทำงานกับความกว้างของอุปกรณ์เท่านั้น ตัวอย่างเช่น หากต้องการละเว้นเบราว์เซอร์ที่เปิดในหน้าต่างเล็ก ๆ คุณสามารถใช้ min-device-width และ max-device-width สำหรับสิ่งนี้:

หน้าจอ @media และ (ความกว้างของอุปกรณ์สูงสุด: 480px) ( .classForiPhoneDisplay ( ขนาดตัวอักษร: 1.2em; ) ) หน้าจอ @media และ (ความกว้างของอุปกรณ์ขั้นต่ำ: 768px) ( .minimumiPadWidth ( ชัดเจน: ทั้งสอง; ขอบล่างสุด : 2px ทึบ #ccc; ) )

โดยเฉพาะอย่างยิ่งสำหรับ iPad ข้อความค้นหาสื่อมีคุณสมบัติ ปฐมนิเทศซึ่งมีค่าเป็นอย่างใดอย่างหนึ่งก็ได้ ภูมิประเทศ(แนวนอน) หรือ ภาพเหมือน(แนวตั้ง):

หน้าจอ @media และ (การวางแนว: แนวนอน) ( .iPadLandscape ( ความกว้าง: 30%; float: right; ) ) หน้าจอ @media และ (การวางแนว: แนวตั้ง) ( .iPadPortrait ( ชัดเจน: ทั้งสอง; ) )

คุณยังสามารถรวมค่าการสืบค้นสื่อได้:

@media screen และ (ความกว้างขั้นต่ำ: 800px) และ (ความกว้างสูงสุด: 1200px) ( .classForaMediumScreen ( พื้นหลัง: #cc0000; width: 30%; float: right; ) )

รหัสนี้จะใช้ได้กับหน้าจอหรือหน้าต่างเบราว์เซอร์ที่มีความกว้างระหว่าง 800 ถึง 1200 พิกเซลเท่านั้น

คุณสามารถโหลดชีตเฉพาะที่มีสไตล์สำหรับค่าคิวรีสื่อต่างๆ ได้ดังนี้:

จาวาสคริปต์

หากเบราว์เซอร์ของคุณไม่รองรับคิวรีสื่อ CSS3 การเปลี่ยนสไตล์สามารถทำได้โดยใช้ jQuery:

$(document).ready(function())( $(window).bind("resize", resizeWindow); function resizeWindow(e)( var newWindowWidth = $(window).width(); // ถ้าความกว้างเป็น น้อยกว่า 600 px จะใช้สไตล์ชีทมือถือหาก (newWindowWidth< 600){ $("link").attr({href: "mobile.css"}); } else if(newWindowWidth >600)( // หากความกว้างมากกว่า 600 px สไตล์ชีทของเดสก์ท็อปจะถูกใช้ $("link").attr((href: "style.css")); ) ) ));

การแสดงเนื้อหาเพิ่มเติม

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

นี่คือมาร์กอัปของเรา:

เนื้อหาแถบด้านข้างซ้าย | เนื้อหาแถบด้านข้างขวา

เนื้อหาหลัก แถบด้านข้างซ้าย แถบด้านข้างขวา

style.css (หลัก):

#content( width: 54%; float: left; margin-right: 3%; ) #sidebar-left( width: 20%; float: left; margin-right: 3%; ) #sidebar-right( width: 20) %; float: ซ้าย; ) .sidebar-nav( จอแสดงผล: ไม่มี; )

mobile.css (ประยุกต์):

#content( width: 100%; ) #sidebar-left( display: none; ) #sidebar-right( display: none; ) .sidebar-nav( display: inline; )

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

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

1. วิดีโอแบบปรับเปลี่ยนได้

เคล็ดลับ CSS นี้ช่วยให้วิดีโอที่ฝังไว้ขยายออกไปตามขอบเขตที่ระบุได้

วิดีโอ ( ตำแหน่ง: สัมพันธ์; การขยายด้านล่าง: 56.25%; ความสูง: 0; ล้น: ซ่อน; ) .video iframe, วัตถุ .video, .video ฝัง ( ตำแหน่ง: สัมบูรณ์; ด้านบน: 0; ซ้าย: 0; ความกว้าง: 100% ; ความสูง: 100% )

2. ความกว้างขั้นต่ำและสูงสุด

คุณสมบัติความกว้างสูงสุดช่วยให้คุณสามารถกำหนดความกว้างสูงสุดขององค์ประกอบได้ ควรใช้เพื่อป้องกันไม่ให้องค์ประกอบขยายเกินกรอบที่กำหนด

คอนเทนเนอร์ที่มีคุณสมบัติความกว้างสูงสุด

ตัวอย่างด้านล่างกำหนดขนาดคอนเทนเนอร์เป็น 800px แต่กำหนดขีดจำกัดขนาดไว้ที่ 90%

คอนเทนเนอร์ (กว้าง: 800px; ความกว้างสูงสุด: 90%; )

รูปภาพที่ปรับเปลี่ยนได้

คุณสามารถทำให้รูปภาพปรับขนาดเป็นขนาดสูงสุดได้โดยอัตโนมัติโดยใช้คุณสมบัติ max-width:100% และ height:auto

Img (ความกว้างสูงสุด: 100%; ความสูง: อัตโนมัติ; )

โค้ดด้านบนสำหรับรูปภาพที่ตอบสนองนั้นใช้งานได้ใน IE7 และ IE9 แต่ใช้ไม่ได้ใน IE8 เพื่อแก้ไขสถานการณ์ คุณต้องเพิ่มคุณสมบัติ width:auto คุณสามารถใช้กฎแบบมีเงื่อนไข CSS สำหรับ IE8 โดยเฉพาะหรือเคล็ดลับด้านล่างสำหรับ IE:

@media \0screen ( img ( width: auto; /* สำหรับ ie 8 */ ) )

คุณสมบัติความกว้างขั้นต่ำ

คุณสมบัติความกว้างขั้นต่ำอยู่ตรงข้ามกับคุณสมบัติความกว้างสูงสุด กำหนดความกว้างขั้นต่ำที่เป็นไปได้ขององค์ประกอบ ด้านล่างนี้เป็นตัวอย่างของการใช้คุณสมบัติ min-width เพื่อป้องกันไม่ให้ช่องป้อนข้อมูลเล็กเกินไปเมื่อซูมออก

3. ค่าสัมพัทธ์

ในเทมเพลตที่ตอบสนอง การใช้ค่าสัมพัทธ์สามารถลดความซับซ้อนของโค้ด CSS และปรับปรุงรูปลักษณ์การออกแบบของคุณได้อย่างมาก

สาขาสัมพัทธ์

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

ขนาดตัวอักษรสัมพัทธ์

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

ช่องว่างภายในแบบสัมพันธ์

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

4. เคล็ดลับกับคุณสมบัติล้น: ซ่อนเร้น

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

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

แบ่งคำ ( ตัดคำ: แบ่งคำ; )

เมื่อเร็วๆ นี้เมื่อ 10 ปีที่แล้ว ตอนที่สร้างเว็บไซต์ นักออกแบบเว็บไซต์ได้รับคำแนะนำจากความกว้างหน้าจอโดยเฉลี่ยของจอภาพของผู้ใช้ ในตอนแรก ความละเอียดที่พบบ่อยที่สุดคือ 800*600 จากนั้นจึงขยายเป็น 1024*768 บนอินเทอร์เน็ตอาจเจอคำต่อไปนี้: "ไซต์นี้ได้รับการปรับให้เหมาะสมสำหรับการแก้ปัญหาดังกล่าว" ด้วยจำนวนหน้าจอที่เพิ่มขึ้นเลย์เอาต์ยางของเว็บไซต์จึงได้รับความนิยมซึ่งฉันเขียนไว้ในบทความชื่อเดียวกัน ด้วยเลย์เอาต์ประเภทนี้ ทำให้สามารถดูไซต์บนจอภาพที่มีความละเอียดต่างกันได้

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

หากไซต์ดูไม่ดีบนหน้าจอขนาดเล็ก ผู้เยี่ยมชมก็ออกจากไซต์นั้น ปริมาณการเข้าชมลดลง และปัจจัยด้านพฤติกรรมแย่ลง

หากต้องการตรวจสอบว่าไซต์ของคุณมีลักษณะอย่างไรเมื่อดูบนอุปกรณ์ต่างๆ คุณสามารถใช้บริการ Screenfly ได้

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

• วิธีแก้ปัญหาการแสดงผลเว็บไซต์ปกติบนอุปกรณ์ต่าง ๆ ? มีสองวิธี:
• ใช้ไซต์สองเวอร์ชัน เวอร์ชันปกติสำหรับคอมพิวเตอร์เดสก์ท็อป และเวอร์ชันมือถือ

ใช้การออกแบบที่ตอบสนอง

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

การออกแบบที่ตอบสนองคืออะไร?

นี่คือดีไซน์แบบไหน และแตกต่างจากยางอย่างไร?

เทมเพลตยางไม่เปลี่ยนโครงสร้างเมื่อความกว้างของหน้าจอเปลี่ยนไป แต่จะเปลี่ยนแปลงขนาดเท่านั้น ตัวอย่างเช่น หน้าเว็บมีสามคอลัมน์: ทางด้านซ้ายคือเมนูที่มีความกว้าง 25% ของความกว้างของหน้าต่าง ตรงกลางคือเนื้อหา – 50% ทางด้านขวาคือแถบด้านข้าง – 25% ด้วยความกว้างของหน้าต่าง 1,000 พิกเซล จะมีขนาด 250, 500 และ 250 พิกเซล ตามลำดับ ซึ่งถือว่าค่อนข้างปกติ แต่ถ้าคุณใช้โทรศัพท์มือถือที่มีหน้าจอขนาดเล็กกว้าง 320 พิกเซล คอลัมน์ต่างๆ จะย่อขนาดลงเหลือ 80, 160, 80 พิกเซล และไม่สามารถอ่านได้

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

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

การออกแบบที่ตอบสนองได้ถูกสร้างขึ้นอย่างไร

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

เทมเพลตที่ตอบสนอง

เป็นไปได้หรือไม่ที่จะแปลงเทมเพลตเว็บไซต์ที่มีอยู่ให้เป็นเวอร์ชันตอบสนอง แน่นอนคุณสามารถทำได้หากคุณมีความรู้เกี่ยวกับ HTML และ CSS เพียงพอ แต่ถ้าคุณใช้ระบบการจัดการเนื้อหาใด ๆ - WordPress, Joomla!, Drupal จะเป็นการดีกว่าถ้าค้นหาเทมเพลตสำเร็จรูป ตอนนี้เทมเพลตแบบปรับได้จำนวนมากได้รับการพัฒนาแล้ว อย่างไรก็ตามในบทความของฉัน "วิธีเลือกเทมเพลตสำหรับ WordPress" ตอนนี้คุณควรเพิ่มรายการอื่น "การตรวจสอบเทมเพลตเพื่อการตอบสนอง"

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

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

ทั้งหมดนี้เป็นเรื่องจริงจังมาก แต่เพื่อหยุดพัก ฉันขอแนะนำให้รวบรวมปริศนาและดูภาพวาดอื่นของเพื่อนร่วมชาติของฉัน ศิลปินประชาชนแห่งรัสเซีย N.P.

เขียนความคิดเห็นของคุณเกี่ยวกับการออกแบบที่ตอบสนองในความคิดเห็น