Adaptive คือชุดเทมเพลตที่ปรับให้เข้ากับเทอร์มินัลทั้งหมด แต่เค้าโครงที่เห็นบนอุปกรณ์แต่ละเครื่องจะเหมือนกัน หรือที่เรียกกันทั่วไปว่าการปรับความกว้าง
ชุดเทมเพลตแบบตอบสนองจะปรับให้เข้ากับเทอร์มินัลทั้งหมด แต่เค้าโครงที่แต่ละอุปกรณ์เห็นอาจแตกต่างกัน
แม้ว่าการออกแบบเว็บไซต์แบบตอบสนอง/ปรับเปลี่ยนได้จะนำมาซึ่งข้อเสีย เช่น ภาระงานหนักที่ต้องเข้ากันได้กับอุปกรณ์ต่างๆ โค้ดที่ยุ่งยาก และเวลาในการโหลดที่ยาวนาน แต่สิ่งเหล่านี้เป็นแบบข้ามแพลตฟอร์มและเทอร์มินัล สามารถออกแบบได้เพียงครั้งเดียว ใช้งานได้ในระดับสากล และสามารถปรับเปลี่ยนได้ตาม ความละเอียดหน้าจอและการซูมภาพอัตโนมัติและการปรับเค้าโครงอัตโนมัติไม่เพียงแต่เป็นการใช้งานทางเทคนิคเท่านั้น แต่ยังเป็นแนวทางใหม่ในการคิดเกี่ยวกับการออกแบบอีกด้วย
วิธีแก้ปัญหาสำหรับเว็บไซต์หลายแห่งคือการจัดเตรียมหน้าเว็บที่แตกต่างกันสำหรับอุปกรณ์ที่แตกต่างกัน เช่น การให้บริการเวอร์ชันมือถือโดยเฉพาะ หรือเวอร์ชัน iPhone/iPad แม้ว่าสิ่งนี้จะทำให้แน่ใจถึงผลกระทบ แต่ก็ยุ่งยากกว่าและจำเป็นต้องบำรุงรักษาหลายเวอร์ชันในเวลาเดียวกัน นอกจากนี้ หากเว็บไซต์มีหลายพอร์ทัล ก็จะเพิ่มความซับซ้อนของการออกแบบสถาปัตยกรรมอย่างมาก
การปรับตัวยังคงทำให้เกิดปัญหา หากหน้าจอเล็กเกินไป แม้ว่าหน้าเว็บจะสามารถปรับให้เข้ากับขนาดหน้าจอได้ ก็จะรู้สึกว่าเนื้อหาหนาแน่นเกินไปเมื่อดูบนหน้าจอขนาดเล็ก การตอบสนองเป็นแนวคิดที่ได้รับมาเพื่อแก้ไขปัญหานี้ ปัญหา. สามารถรับรู้ความกว้างของหน้าจอได้โดยอัตโนมัติและปรับการออกแบบเว็บให้เหมาะสม เค้าโครงและเนื้อหาที่แสดงอาจมีการเปลี่ยนแปลง
ประสบการณ์การปรับเปลี่ยน http://m.ctrip.com/html5/ ประสบการณ์การตอบสนอง http://segmentfault.com/
CSS สวนลับ http://www.csszengarden.com/
http://caibaojian.com/demo/ued/
2. ความรู้พื้นฐานเกี่ยวกับการตอบสนอง 1. ตั้งค่าเมตาแท็ก<meta name=viewport content=width=device-width, default-scale=1.0, maximum-scale=1.0, user-scalable=no>
มีการอธิบายพารามิเตอร์หลายประการของโค้ดนี้:
§width = ความกว้างของอุปกรณ์: ความกว้างเท่ากับความกว้างของอุปกรณ์ปัจจุบัน
มาตราส่วนเริ่มต้น: มาตราส่วนเริ่มต้น (การตั้งค่าเริ่มต้นคือ 1.0)
§minimum-scale: สเกลขั้นต่ำที่ผู้ใช้สามารถซูมได้ (ค่าเริ่มต้นคือ 1.0)
§ขนาดสูงสุด: ขนาดสูงสุดที่ผู้ใช้สามารถซูมได้ (ค่าเริ่มต้นตั้งไว้ที่ 1.0)
§ผู้ใช้ปรับขนาดได้: ผู้ใช้สามารถซูมด้วยตนเองได้หรือไม่ (ค่าเริ่มต้นคือไม่ เนื่องจากเราไม่ต้องการให้ผู้ใช้ซูมเข้าและออกจากหน้า)
2. การสืบค้นสื่อ การสืบค้นสื่อ CSS3 เป็นปัจจัยสำคัญในการตระหนักถึงการออกแบบที่ตอบสนอง คุณสามารถใช้คุณสมบัติคิวรีสื่อเพื่อให้เพจใช้บล็อก CSS ที่แตกต่างกันตามความกว้างของอุปกรณ์
กฎ CSS ต่อไปนี้จะมีผลเมื่อความกว้างของหน้าจอน้อยกว่าหรือเท่ากับ 980:
@media (ทิศทาง: แนวตั้ง) และ (ความกว้างสูงสุด: 460px) { .video .innerBox .news a.more { display: none; } .video .innerBox .news span { display: none; { ความกว้าง: 100%; } .video .innerBox .news ul { ความกว้าง: 100%; -ปฐมนิเทศ: แนวตั้ง |. แนวนอน
ภาพเหมือน:
ระบุว่าความสูงของพื้นที่ที่มองเห็นได้ของเพจในอุปกรณ์เอาท์พุตที่ระบุนั้นมากกว่าหรือเท่ากับความกว้าง
ภูมิประเทศ:
ยกเว้นค่าแนวตั้ง ทั้งหมดนี้เป็นแนวนอน
เลือกโหลด CSS เพื่อโหลดไฟล์ smallScreen.css หากความกว้างของหน้าจออยู่ระหว่าง 400 พิกเซลถึง 600 พิกเซล
<link rel=stylesheet type=text/cssmedia=screen และ (ความกว้างขั้นต่ำ: 400px) และ (ความกว้างของอุปกรณ์สูงสุด: 600px) href=smallScreen.css />
3. เค้าโครงเปอร์เซ็นต์
3. การออกแบบหน้าตอบสนอง แบบอักษร และการประมวลผลภาพ1. กระบวนการออกแบบหน้าตอบสนอง html5/css3
ขั้นตอนที่ 1: กำหนดประเภทของอุปกรณ์และขนาดหน้าจอที่ต้องเข้ากันได้: รวมถึงอุปกรณ์มือถือ (โทรศัพท์มือถือ แท็บเล็ต) และพีซี สำหรับอุปกรณ์มือถือ ให้ใส่ใจกับการเพิ่มฟังก์ชันท่าทางเมื่อออกแบบและใช้งาน
ขนาดหน้าจอ: รวมถึงขนาดหน้าจอโทรศัพท์มือถือต่างๆ (รวมทั้งแนวนอนและแนวตั้ง), ขนาดแท็บเล็ตต่างๆ (รวมทั้งแนวนอนและแนวตั้ง), หน้าจอคอมพิวเตอร์ธรรมดาและไวด์สกรีน
ขั้นตอนที่ 2: สร้างต้นแบบ wireframe ที่แตกต่างกันสำหรับขนาดที่กำหนด คุณต้องพิจารณาว่าเค้าโครงของเพจเปลี่ยนแปลงไปอย่างไรภายใต้ขนาดที่แตกต่างกัน วิธีปรับขนาดขนาดเนื้อหา การลบฟังก์ชันและเนื้อหา และแม้แต่วิธีดำเนินการในสภาพแวดล้อมพิเศษ การออกแบบเฉพาะทาง ฯลฯ กระบวนการนี้ต้องการการสื่อสารอย่างใกล้ชิดระหว่างนักออกแบบและนักพัฒนาส่วนหน้า
ขั้นตอนที่ 3: การออกแบบภาพ นำเข้ารูปภาพไปยังอุปกรณ์ที่เกี่ยวข้องสำหรับการทดสอบง่ายๆ ซึ่งสามารถช่วยให้เราค้นหาปัญหาในการเข้าถึง ความสามารถในการอ่าน ฯลฯ ได้โดยเร็วที่สุด
เมื่อเปรียบเทียบกับการพัฒนาเว็บแบบดั้งเดิม หน้าการออกแบบที่ตอบสนองมีการเปลี่ยนแปลงเค้าโครงหน้าและขนาดเนื้อหา ดังนั้นผลลัพธ์สุดท้ายจึงมีแนวโน้มที่จะแตกต่างอย่างมากจากแบบร่างการออกแบบ ซึ่งต้องการการสื่อสารที่มากขึ้นระหว่างนักพัฒนาส่วนหน้าและนักออกแบบ
2. แบบอักษรที่ตอบสนอง
การเปรียบเทียบระหว่างหน่วยต่างๆ ใน CSS
พิกเซล: พิกเซล หน่วยความยาวสัมพัทธ์ ขนาดถูกกำหนดโดยความละเอียดหน้าจอ (ร่วมมือกับสื่อสอบถามข้อมูล)
em: หน่วยความยาวสัมพัทธ์ เทียบเท่ากับขนาดตัวอักษรของข้อความภายในออบเจ็กต์ปัจจุบัน หรือสัมพันธ์กับขนาดตัวอักษรเริ่มต้นของเบราว์เซอร์ หากไม่ได้ตั้งค่าขนาดตัวอักษรปัจจุบันสำหรับข้อความอินไลน์ ค่าของ em ไม่คงที่ แต่จะสืบทอดขนาดตัวอักษรขององค์ประกอบหลัก เบราว์เซอร์ที่ไม่มีการแก้ไขทั้งหมดจะเป็นไปตาม: 1em=16px จากนั้น 12px=0.75em,10px=0.625em เพื่อให้การแปลงขนาดแบบอักษรง่ายขึ้น คุณจะต้องประกาศ Font-size=62.5% ในตัวเลือกเนื้อหาใน CSS ซึ่งทำให้ค่า em กลายเป็น 16px*62.5%=10px ดังนั้น 12px=1.2em, 10px=1em กล่าวคือ คุณเพียงแค่ต้องหารค่า px เดิมของคุณด้วย 10 แล้วเปลี่ยนเป็น em เป็นหน่วย
rem: หน่วยสัมพันธ์ใหม่ใน CSS3 ข้อแตกต่างที่สำคัญจาก em คือ เมื่อใช้ rem เพื่อกำหนดขนาดตัวอักษรสำหรับองค์ประกอบนั้น มันก็ยังคงเป็นขนาดสัมพัทธ์ แต่จะสัมพันธ์กับองค์ประกอบรูท HTML เท่านั้น หน่วยนี้สามารถกล่าวได้ว่ารวมข้อดีของขนาดสัมพัทธ์และขนาดสัมบูรณ์เข้าด้วยกัน คุณสามารถปรับขนาดฟอนต์ทั้งหมดตามสัดส่วนโดยการปรับเปลี่ยนเฉพาะองค์ประกอบรูท และคุณสามารถหลีกเลี่ยงปฏิกิริยาลูกโซ่ของขนาดฟอนต์แบบผสมทีละชั้นได้ ปัจจุบันเบราว์เซอร์ทั้งหมดยกเว้น IE8 และเวอร์ชันก่อนหน้ารองรับ rem สำหรับเบราว์เซอร์ที่ไม่รองรับ วิธีแก้ปัญหานั้นง่ายมาก ซึ่งก็คือการเขียนคำสั่งหน่วยสัมบูรณ์เพิ่มเติม เบราว์เซอร์เหล่านี้ไม่สนใจขนาดตัวอักษรที่ตั้งค่าด้วย rem
%: นอกจากนี้ เรายังสามารถใช้เปอร์เซ็นต์เพื่อระบุขนาด ซึ่งแสดงถึงจำนวนแบบอักษรปัจจุบันที่สัมพันธ์กับขนาดแบบอักษรเริ่มต้นของเบราว์เซอร์ หน่วยนี้ยังใช้บ่อยในการออกแบบที่ตอบสนองต่อหน้า
html{font-size:62.5%;/* 10۞16=62.5% */}body{font-size:12px;font-size:1.2rem;/* 12۞10=1.2 */}p{font-size :14px;font-size:1.4rem;}ควรสังเกตว่าเพื่อให้เข้ากันได้กับเบราว์เซอร์ที่ไม่รองรับ rem เราจำเป็นต้องเขียนค่า px ที่เกี่ยวข้องไว้หน้า rem เพื่อให้เบราว์เซอร์ที่ไม่รองรับสามารถดาวน์เกรดได้อย่างสวยงาม ที่จริงแล้ว คุณไม่ต้องกังวลมากเกินไปว่าจะใช้ขนาดตัวอักษรเริ่มต้น: 100% หรือตั้งค่าเป็นขนาดตัวอักษร: 62.5% หากคุณแนะนำเครื่องมือประมวลผลล่วงหน้า CSS คุณสามารถใช้ค่าเริ่มต้นได้ หากคุณใช้ขนาดตัวอักษร: 62.5% ด้วยเหตุผลอื่น ไม่มีอะไรผิดปกติ คุณสามารถรีเซ็ตกลับเป็นขนาดตัวอักษรเริ่มต้นที่คุณต้องการในส่วนเนื้อหาได้
3. การประมวลผลภาพและวิดีโอที่ตอบสนอง
http://alistapart.com/d/responsive-web-design/ex/ex-site-flexible.html#
1. ภาพพื้นหลัง ---- ข้อความค้นหาสื่อ
2. ภาพการทำให้เป็นของเหลว ---- ภาพยืดหยุ่น
img วัตถุ { ความกว้างสูงสุด: 100%;}https://www.filamentgroup.com/examples/responsive-images/3.องค์ประกอบ HTML5 <ภาพ>
องค์ประกอบ HTML5 <picture> สามารถตั้งค่ารูปภาพได้หลายภาพ
รองรับเบราว์เซอร์
<ภาพ> <แหล่งที่มา srcset=images/img_smallflower.jpg สื่อ=(ความกว้างสูงสุด: 400px)> <แหล่งที่มา srcset=images/img_flowers.jpg> <img src=images/img_flowers.jpg style="margin: 0px; การขยาย: 0px; โครงร่าง: ไม่มี; ขนาดตัวอักษร: 14px; width: 660px; overflow: ซ่อนเร้น; clear: ทั้งสอง; ตระกูลแบบอักษร: tahoma, arial, Microsoft YaHei;"><script src=http://cdn.gbtags.com/picturefill/2.0.0/picturefill.min.js></script>4. ใช้แท็ก noscript เพื่อสร้างภาพที่ตอบสนอง
Js การโหลดรูปภาพขนาดใหญ่และเล็กแบบไดนามิก
<span class=img-placeholder></span><noscript data-mobilesrc=small.jpg data-fullsrc=big.jpg data-alttext=ข้อความแสดงแทนของคุณ class=responsivize> <img src=big.jpg></noscript > <script type=text/javascript>var responsiveImageTag = { แทนที่InitialImages:function(respons) { var platform = desktop; resImage = '.'+respons; var responsiveImages = $(resImage); var i, noOfresponsiveImages.length; // การทดสอบความกว้างของอุปกรณ์แสดงผลปัจจุบัน if(screen.width <= 767) {//767px, เล็กกว่า ipad พวกเขา ทุกคนคิดว่ามันเป็นแพลตฟอร์มมือถือ = มือถือ; } // ตั้งค่าองค์ประกอบแหล่งที่มาเริ่มต้นบนรูปภาพสำหรับ (i = 0; i < noOfresponsiveImages; i = i + 1 ){ var noScriptElem = $(responsiveImages[i]); var img = window.document.createElement(img); img.alt = noScriptElem.attr(ข้อมูล-alttext); = มือถือ){ img.src = noScriptElem.attr(data-mobilesrc); }else{ img.src = noScriptElem.attr(data-fullsrc); } img.className = responsive; $('.img-placeholder').eq(i).html('').append(img); ); } }};responsiveImageTag.replaceInitialImages('ตอบสนอง');$(window).resize(function(){ responsiveImageTag.replaceInitialImages('ตอบสนอง');});</script>4. กรอบการตอบสนองการปรับแต่ง: หากเว็บไซต์ของคุณมีการออกแบบที่หลากหลายจำนวนมาก หากคุณยังคงต้องการใช้บูตสแตรป คุณจะต้องแก้ไขเฟรมเวิร์กเป็นชั้นล่างสุด: ต้องคัดลอกสไตล์จำนวนมาก และลำดับชั้นของ CSS ทำให้เกิดความสับสนและ ยากที่จะรักษา
ในบางสถานการณ์ bootstrap มีประโยชน์มาก ตัวอย่างเช่น หากคุณต้องการสร้างเว็บไซต์ส่วนตัว เว็บไซต์องค์กร อินเทอร์เฟซการจัดการแบ็กเอนด์ของบล็อก และโปรเจ็กต์อื่นๆ ที่ค่อนข้างสวยงามอย่างรวดเร็ว ที่ไม่ต้องการการปรับแต่งเพจจำนวนมาก เบราว์เซอร์เหล่านั้นมักจะเหมาะกับโปรเจ็กต์ระบบแบ็กเอนด์ส่วนใหญ่ที่เข้ากันได้กับเบราว์เซอร์ที่ดี รูปแบบสัมปทานและไม่ง่ายที่จะเจาะลึกรายละเอียด หรือคุณอาจไม่มีประสบการณ์ในการสร้างส่วนหน้าของเว็บไซต์ เมื่อพิจารณาถึงความเข้ากันได้ของเบราว์เซอร์และขนาดอุปกรณ์นับไม่ถ้วน Bootstrap จะช่วยแก้ปัญหาให้คุณได้มากมาย