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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

ใช้กรอบงาน

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

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

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

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

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

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

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

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

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

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

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

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

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

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

นอกจากโครงสร้างที่เปลี่ยนแปลงแล้ว การออกแบบที่ตอบสนองยังมีข้อดีอื่นๆ อีกหลายประการ:

1. ลักษณะที่เหมือนกันของทรัพยากรใน เบราว์เซอร์ที่แตกต่างกันและต่อไป แพลตฟอร์มต่างๆ
2. เว็บไซต์มี URL เดียวกัน ซึ่งมีส่วนช่วยเพิ่มประสิทธิภาพ SEO
3. นักพัฒนาจำเป็นต้องดูแลรักษาไซต์เพียงแห่งเดียว ซึ่งจะช่วยลดเวลาที่ใช้ในการออกแบบและเนื้อหา

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

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

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

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

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

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

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

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

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

ตัวเลือกไหนเหมาะกับอะไร?

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

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

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

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

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

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

การออกแบบเว็บไซต์แบบตอบสนองคืออะไร

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

เกณฑ์หลักในการประเมินความสะดวกสบายในการรับชมคือ:

  1. พื้นที่รับชม.
  2. ความกว้างของเนื้อหา
  3. ขนาดของฟอนต์ รูปภาพ หน้าต่างวิดีโอ
  4. องค์ประกอบที่ใช้งานอยู่

กล่าวอีกนัยหนึ่ง ข้อความควรอ่านได้ รูปภาพและวิดีโอควรมองเห็นได้ชัดเจน รายการเมนูและลิงก์ควรมองเห็น เข้าถึงได้ และเข้าใจได้

วิธีทำให้เว็บไซต์ของคุณตอบสนอง

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

  • เทมเพลตเว็บไซต์ที่ปรับเปลี่ยนได้
  • เว็บไซต์เวอร์ชันมือถือ
  • การติดตั้ง แอปพลิเคชั่นพิเศษบนอุปกรณ์ของผู้ใช้

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

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

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

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

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

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

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

รูปแบบเว็บไซต์ที่ปรับเปลี่ยนได้

ในการสร้างการออกแบบที่ตอบสนองคุณจะต้องหันไปใช้เทคโนโลยี รูปแบบที่ปรับเปลี่ยนได้- สาระสำคัญของมันมีดังนี้:
ทำแม่แบบ “ยางพารา”

นั่นคืออย่ายึดตามความกว้างของหน้าอย่างเคร่งครัด แต่ให้ใช้ หน่วยสัมพัทธ์- นั่นคือทำให้เทมเพลตของคุณบีบอัดตามสัดส่วนซึ่งก็คือ "ยาง"

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

กำหนดความกว้างของหน้าจอ "จุดควบคุม"

การกำหนดจุดควบคุม (CP) ของความกว้างหน้าจอเป็นสิ่งจำเป็นสำหรับการวางแผนการดำเนินการต่อไป

ตัวอย่างเช่น.
ความกว้างหน้าจอสูงสุดคือ 1,000 พิกเซล ความกว้างหน้าจอของแท็บเล็ตคือ 800 พิกเซล สมาร์ทโฟนคือ 420 พิกเซล

จุดควบคุม (CT) เหล่านี้อาจแตกต่างกันไป ประเภทต่างๆเว็บไซต์ บางครั้งก็เพียงพอแล้ว เช่น 600 พิกเซล และรับประกันคุณภาพการรับชมที่ความละเอียดน้อยกว่าเนื่องจาก "ยาง" ของเทมเพลต

การวางแผนเค้าโครงหน้าจอสำหรับการสแกน CT แต่ละครั้ง

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

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

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

สื่อสอบถาม

สำหรับงาน จุดควบคุมคุณต้องใช้คำสั่งสื่อ คำสั่งเหล่านี้เป็นมาตรฐาน CSS3 สำหรับควบคุมการแสดงเนื้อหาหน้าเว็บไซต์ ความละเอียดที่แตกต่างกันหน้าจอ.
คำสั่งนี้มีลักษณะดังนี้:

@media เท่านั้น หน้าจอ และ (ความกว้างสูงสุด: 520px)( .art-Header-jpeg( height: 80%; display: none; ) .art-Logo( ตำแหน่ง: คงที่; top: 10px; ) .art-Logo-text( display: none; ) ...... ..... ตัวดำเนินการ CSS ..... )

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

มีหลายวิธีในการสร้างเทมเพลตที่ตอบสนองสำหรับบล็อก WordPress ของคุณ

  1. ติดตั้งปลั๊กอินที่เหมาะสม
  2. ซื้อเทมเพลตแบบปรับได้สำเร็จรูป
  3. ปรับ เทมเพลตที่มีอยู่ด้วยตัวเองหรือสั่งบริการจากผู้เชี่ยวชาญ

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

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

กล่าวโดยสรุป ฉันตัดสินใจเลือกตัวเลือกที่สามและตัดสินใจปรับเทมเพลตด้วยตัวเอง

เทมเพลตที่ตอบสนองต่อ WordPress ด้วยตัวคุณเอง

เมื่อคุ้นเคยกับหลักการปรับการออกแบบสำหรับอุปกรณ์พกพาแล้ว ฉันจึงเริ่มทำธุรกิจอย่างร่าเริง แต่รู้สึกว่าความรู้เกี่ยวกับ html, css, php ยังไม่เพียงพอ

และฉันเริ่มมีแนวโน้มที่จะซื้อแล้ว เทมเพลตสำเร็จรูปแต่ในขณะนั้นฉันได้รับข้อมูลเกี่ยวกับหลักสูตรของ Andreev Bernatsky และ Kudlay “WordPress-Master จากสองคน บล็อกส่วนตัวเป็นเทมเพลตพรีเมียม" ช่วงหนึ่งของหลักสูตรนี้มีบทเรียนเกี่ยวกับการปรับเทมเพลตสำเร็จรูปสำหรับอุปกรณ์เคลื่อนที่

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

บริการ Google สำหรับตรวจสอบความเร็วในการโหลดเว็บไซต์สำหรับอุปกรณ์มือถือและเดสก์ท็อป - https://developers.google.com/speed/pagespeed/insights/
เราได้รับคำแนะนำเกี่ยวกับมาตรการเร่งความเร็วในการโหลดเว็บไซต์ของคุณที่นี่

ฉันต้องการอธิบายบริการเพิ่มเติมบางอย่างโดยย่อ แต่ฉันเจอสิ่งที่ดี บทความโดยละเอียดและตัดสินใจที่จะไม่เครียด แต่ให้ลิงก์ไปยังคุณ - http://habrahabr.ru/post/189726/

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

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

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

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

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

  • เมื่อสร้างการออกแบบแบบตอบสนอง จะใช้เฉพาะ HTML และ CSS เท่านั้น - ไม่มี การเชื่อมต่อจาวาสคริปต์เพื่อกำหนด “การตอบสนอง” ขององค์ประกอบการออกแบบ
  • รูปแบบที่ปรับเปลี่ยนตามอุปกรณ์จะกำหนดว่าองค์ประกอบต่างๆ ของเว็บไซต์จะมีลักษณะอย่างไร อุปกรณ์ที่แตกต่างกัน- อย่างไรก็ตาม องค์ประกอบเหล่านี้ไม่ได้ถูกซ่อน/แทนที่โดยองค์ประกอบอื่น และพฤติกรรมขององค์ประกอบเหล่านี้ตลอดจนฟังก์ชันที่องค์ประกอบเหล่านั้นทำจะไม่เปลี่ยนแปลง
  • หลักการพื้นฐานสามประการของการออกแบบที่ตอบสนอง:
    1. การจัดเรียงองค์ประกอบทั้งหมดภายในตารางโมดูลาร์
    2. องค์ประกอบเค้าโครงและไฟล์สื่อทั้งหมด (รวมถึงรูปภาพ) นั้น "ยืดหยุ่น" - ขนาดขึ้นอยู่กับขนาดหน้าจอ
    3. การทำงานกับ Media Queries - โมดูล CSS3 ที่ให้คุณตั้งค่าสไตล์ต่างๆ (หรือแม้แต่สไตล์ชีต) ขึ้นอยู่กับความละเอียดของหน้าจอ ขนาด และคุณสมบัติอื่น ๆ
  • การออกแบบที่ตอบสนองถูกสร้างขึ้นโดยใช้มาร์กอัปที่ตอบสนอง (อย่าสับสนกับการออกแบบที่ตอบสนอง) รูปแบบที่ปรับเปลี่ยนได้คือไซต์สร้างหลายสไตล์ ตัวเลือกสำหรับการจัดองค์ประกอบ ตารางโมดูลาร์และสไตล์องค์ประกอบการออกแบบหลายแบบ ตัวเลือกเหล่านี้จะแทนที่กันเมื่อขนาดหน้าจอเปลี่ยนแปลง และจุดเปลี่ยนบางอย่างจะเกิดขึ้นระหว่างกัน ประเภทต่างๆเค้าโครง/สไตล์ของไซต์
  • การออกแบบที่ตอบสนองไม่เกี่ยวข้องกับการทำงานด้วย แบบจำลองวัตถุองค์ประกอบบนเพจไม่ได้หมายความถึงการเปลี่ยนแปลงในลำดับชั้น/การซ้อนของบล็อกและออบเจ็กต์เมื่อประเภทของมาร์กอัปเปลี่ยนแปลง

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

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

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

คำนิยาม ความสับสน

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

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

คุณสมบัติของแนวทาง

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

ในทางปฏิบัติ

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

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

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

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

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

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

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

หลักการพื้นฐานของการออกแบบที่ตอบสนอง:

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

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

ขนาดเลย์เอาต์การออกแบบที่ตอบสนอง

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

ดังนั้น จากวิสัยทัศน์ของฉันล้วนๆ ฉันจะร่างหลักการและมิติที่ควรพัฒนาเค้าโครง

หากคุณปฏิบัติตามหลักการของมือถือก่อน ก็จะมีขนาดความละเอียดที่คุณต้องพัฒนาเค้าโครง 320px / 480px / 768px / 1024px / 1280pxบางทีมันอาจขึ้นอยู่กับงานมากกว่า

รูปภาพจะมีลักษณะประมาณนี้ แต่บ่อยครั้งไม่จำเป็นต้องสร้างเค้าโครงสำหรับความละเอียดบางอย่าง เช่น 480px หากเค้าโครงไม่แตกระหว่างนั้น 768 - 320px.

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

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

แบบสอบถามสื่อและวิวพอร์ตในการออกแบบที่ตอบสนอง

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

เมตาแท็กวิวพอร์ตเขียนดังนี้:

  • width=ความกว้างของอุปกรณ์— หมายความว่าความกว้างของหน้าเว็บไซต์ถูกตั้งค่าให้ตรงกับความกว้างของหน้าจออุปกรณ์
  • มาตราส่วนเริ่มต้น=1.0- คุณลักษณะนี้จะบอกให้เบราว์เซอร์ตั้งค่าขนาดพิกเซลเป็น 1:1 ซึ่งหมายความว่าไม่ต้องปรับขนาด

ทางซ้ายไม่มีเมตาแท็ก ทางด้านขวาใช้เมตาแท็กวิวพอร์ต

คุณสมบัติและพารามิเตอร์อื่นๆ สามารถตั้งค่าสำหรับเมตาแท็กได้

แบบสอบถามสื่อ

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

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

มีเขียนไว้ดังนี้:

หน้าจอ @media และ (ความกว้างสูงสุด: 1,000px) ( .class ( คุณสมบัติ: ค่า; ) )

  • @สื่อ– สื่อ – คำขอ;
  • หน้าจอ– สื่อ – ประเภท (เรียกอีกอย่างว่าประเภทสื่อ)
  • ความกว้างสูงสุด: 1,000px– เงื่อนไขที่ต้องปฏิบัติตาม (ในกรณีของเรา สไตล์จะถูกนำไปใช้หากความกว้างของหน้าต่างน้อยกว่า 1,000px)
  • . ระดับ– ตัวเลือกที่เกี่ยวข้อง (คลาส, id) จะถูกเขียนโดยกำหนดค่าใหม่ให้กับคุณสมบัติ

ในกรณีส่วนใหญ่ ฟังก์ชันสื่อต่อไปนี้จะใช้ในการพัฒนาการออกแบบแบบตอบสนอง

  • ความกว้างสูงสุด: ความกว้าง— หมายความว่าหากความกว้างของหน้าต่างเบราว์เซอร์น้อยกว่าความกว้างที่ระบุ แสดงว่าตรงตามเงื่อนไขและใช้สไตล์ที่เหมาะสม (ตัวอย่าง: ความกว้างสูงสุด: 768px หมายความว่าหากความกว้างของหน้าต่างเบราว์เซอร์น้อยกว่า 768px จากนั้นควรใช้สไตล์ที่ระบุในการสืบค้นสื่อ)
  • ความกว้างขั้นต่ำ: ความกว้าง- หมายความว่าหากความกว้างของหน้าต่างเบราว์เซอร์มากกว่าความกว้างที่ระบุ จะเป็นไปตามเงื่อนไขและใช้สไตล์ที่ระบุในคำขอ (ตัวอย่าง: ความกว้างขั้นต่ำ: 480px)

แต่สามารถใช้ฟังก์ชันอื่นได้:สี, ความกว้างของอุปกรณ์, ตาราง, ความสูง, การวางแนว: แนวนอน, การวางแนว: แนวตั้ง, ความละเอียดและอื่น ๆ

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

  • 320px- มือถือ
  • 480px- มือถือ
  • 768px- แท็บเล็ต
  • 1024px- แท็บเล็ต เน็ตบุ๊ก
  • 1280pxและอื่นๆ อีกมากมาย - คอมพิวเตอร์ส่วนบุคคล

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

การสืบค้นสื่อยังใช้ตัวดำเนินการเชิงตรรกะ เช่น:

  • และ– ตรรกะ AND ใช้เพื่อรวมเงื่อนไขต่างๆ (ตัวอย่าง: @media print และ (สี) ( ... ))
  • ไม่– ตรรกะ NOT ใช้เพื่อลบล้างเงื่อนไข (ตัวอย่าง: @media not all และ (สี) ( … ))
  • เท่านั้น– ใช้สำหรับเบราว์เซอร์รุ่นเก่าที่ไม่รองรับการสืบค้นสื่อ (ตัวอย่าง: @media only screen และ (max-width: 1300px) ( … ))

คำสั่งสื่อจะถูกเขียนไว้ที่ส่วนท้ายของไฟล์สไตล์ หลังจากสไตล์ CSS หลักทั้งหมด

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

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

  1. ก่อนอื่น เราทำสำเนาสำรองของเทมเพลต (ธีม) ไว้เผื่อไว้
  2. ต่อไปเราต้องการโปรแกรมสำหรับแก้ไข css ซึ่งอาจเป็นโปรแกรมแก้ไขโค้ดใดก็ได้ เช่น วงเล็บจาก Adobe ซึ่งฟรี หรือ Notepad++
  3. และเบราว์เซอร์ Google Chrome พร้อมด้วยตัวตรวจสอบโค้ด (เรียกโดยปุ่ม F12)

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

นี่คือ px คุณต้องแปลงเป็น % และตั้งค่าแบบอักษรเป็น em สิ่งนี้เกี่ยวข้องกับความกว้างและแบบอักษรเป็นหลัก

ปล่อยให้ความกว้างของตัวตัดคอนเทนเนอร์หลัก (ความกว้างสูงสุด: 960px;) ไม่เปลี่ยนแปลง หากเขียนความกว้างไว้ ให้เปลี่ยนเป็นความกว้างสูงสุด สำหรับคอนเทนเนอร์ที่เหลือ เราจะเปลี่ยนความกว้างเป็นอัตราส่วน % เราจะแปลโดยใช้สูตร:

ขนาดตู้คอนเทนเนอร์ (px) / ขนาดของคอนเทนเนอร์หลัก (พาเรนต์) ใน (พิกเซล) * 100% = ผลลัพธ์ (%)

ตัวอย่างเช่น คอนเทนเนอร์เนื้อหาของไซต์แบบคงที่คือ 720px ซึ่งเป็นขนาดของคอนเทนเนอร์หลัก (พาเรนต์) เช่น 960px มาตรฐาน จากนั้นเราจะได้ดังต่อไปนี้ 720/960*100=75%

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

ขนาดตัวอักษร (px) /16px (ขนาดมาตรฐาน) = ขนาดตัวอักษร (em)

ตัวอย่างเช่น ขนาดตัวอักษรคือ 32px จากนั้น 32/16=2em
จากนั้นเราจะปรับภาพของเราให้เหมาะสม เมื่อต้องการทำเช่นนี้ เราจะเขียนคุณสมบัติและค่าต่อไปนี้ใน css

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

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

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

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

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

@media only screen และ (ความกว้างสูงสุด: 910px)( /* เราทำให้ส่วนเนื้อหาเต็มความกว้าง ยกเลิกการจัดเรียง */ ส่วน ( width: 100%; float: none; ) /* เรายังทำให้แถบด้านข้างเต็มความกว้างด้วย ยกเลิกการจัดตำแหน่ง*/ ด้านข้าง ( กว้าง: 100%; ลอย: ไม่มี; ) )

หากบล็อกเหล่านี้มีระยะขอบ (ระยะขอบ การเติม) ควรรีเซ็ตเป็นศูนย์หรือนำมาพิจารณาเมื่อเขียนความกว้าง ตัวอย่างเช่น, ช่องว่างภายใน: 2%;จากนั้นความกว้างจะเขียนได้ดังนี้ ความกว้าง: 96%;.

ดังนั้นเราจึงปรับเค้าโครงของเราให้มีความละเอียดน้อยกว่า 910px หากหน้าต่างเบราว์เซอร์มีขนาดเล็กกว่า 910px เนื้อหาจะมีความกว้างเต็ม และแถบด้านข้างจะอยู่ใต้ส่วนเนื้อหาและจะกลายเป็นความกว้างเต็มด้วย

โดยใช้หลักการเดียวกัน เราสร้างจุดควบคุมอื่นๆ ค้นหาความกว้างที่เค้าโครงแตก (ดูไม่ถูกต้อง) บันทึกคำขอสื่อ สร้างสไตล์สำหรับมัน กำหนดความกว้างของบล็อก เราสามารถซ่อนบล็อกที่สำคัญน้อยกว่าได้ ( จอแสดงผล: ไม่มี).

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

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

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



บทความที่เกี่ยวข้อง