เหตุใด Twitter Bootstrap จึงใช้พิกเซลสำหรับขนาดตัวอักษร

เนื่องจาก Twitter Bootstrap ได้รับการออกแบบให้ตอบสนอง / เป็นมิตรกับอุปกรณ์เหตุใดจึงไม่ใช้ขนาดตัวอักษรที่สัมพันธ์กัน

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

[อัปเดต] วันนี้ Mark Otto จึงตอบกลับในหัวข้อที่ฉันอ้างถึงข้างต้น คาดเดาได้ว่าไม่มีการกล่าวถึงการเข้าถึงและการใช้วลี 'pixel-perfect':

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

พิกเซลให้การควบคุมที่สมบูรณ์และการแสดงผลที่สม่ำเสมอในทุกเบราว์เซอร์

นักออกแบบส่วนใหญ่ยังคงคิดและดำเนินการเป็นพิกเซล

ทุกวันนี้เบราว์เซอร์จะขยายขนาดทั้งหน้าดังนั้นจึงไม่ใช่ปัญหาเกี่ยวกับการปรับขนาดหรือสิ่งใด ๆ

การทำรัง ems ในอดีตเป็นความเจ็บปวดและอาจต้องใช้คณิตศาสตร์เพิ่มเติมสำหรับค่าพิกเซลที่คำนวณ / ค่าพิกเซลที่ต้องการ

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

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

ฉันอยากจะแนะนำใครก็ตามที่มีความรู้สึกดีเกี่ยวกับการไปครั้งนี้และ +1 กระทู้นี้

[อัปเดต] แผนงานของ V3 ที่กำหนดไว้ในบล็อกโพสต์รุ่น V2.3ไม่ได้กล่าวถึงการเพิ่มการรองรับ ems

[อัปเดต] ข้อมูลเพิ่มเติมมากมายเกี่ยวกับ Bootstrap V3 ที่มีอยู่ในคำขอดึงที่นี่รวมถึงสิ่งต่อไปนี้จาก Mark Otto:

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

จากนั้นเมื่อเร็ว ๆ นี้ (ในความคิดเห็น):

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

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

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

[อัปเดต] ดูเหมือนว่า rems จะได้รับการสนับสนุนใน V4 (Mdo อ้างจากที่นี่ ):

สำหรับผู้ที่ติดตามเราจะสามารถเปลี่ยนจากพิกเซลเป็น REM ใน v4 ได้เมื่อเราเลิกรองรับ IE8 ทำอะไรมากไม่ได้จนถึงตอนนั้น

[Update กุมภาพันธ์ 17] Bootstrap 4 ยังคงอยู่ในอัลฟา แต่แสดงให้เห็นว่าการใช้ Rems ในของเอกสารพิมพ์แต่ไม่ได้แสดงการใช้งานของ Rems ในของเอกสารรูปแบบ

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

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

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

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

ฉันใช้มันอย่างมีประสิทธิภาพในบางโครงการของฉันมานานกว่าสองปี - มันไม่ได้ผลเท่าที่คุณต้องการ ฉันใช้แค่ form framework, แค่กริด, codebase ทั้งหมดและปรับแต่งให้เหมาะกับความต้องการของฉัน ในหลาย ๆ วิธีมัน 'ยกระดับ' เกมของฉันทำให้ฉันก้าวไปสู่การประมวลผลล่วงหน้าโดยใช้ตัวแปรเสริมสร้างวิธีที่ฉันจัดโครงสร้างโครงการ

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

ฉันตรวจสอบFoundationและชอบสิ่งที่ฉันเห็น แต่ฉันอยู่ในสถานะที่โชคร้ายที่ต้องรองรับ IE8 เนื่องจากมีนักพัฒนาจำนวนมาก Foundation ได้ยกเลิกการรองรับ IE8 ทำให้ 'ไม่ไป' สำหรับฉัน อย่างไรก็ตามเรื่องนี้ผมไม่ได้เกี่ยวกับการที่จะยกเลิกกรอบทั้งส่วนใหญ่โดยเฉพาะสิ่งที่เป็นฟรีการใช้งานและฟรีที่จะปรับเปลี่ยนตาม แต่เพียงผู้เดียวในประเด็นที่ไม่กี่!

Heck ในโครงการเดียวฉันยกส่วนของ Foundation และบางส่วนของ Bootstrap และเพิ่มโค้ดที่กำหนดเองซึ่งเป็นความสวยงามของโอเพ่นซอร์ส

หากคุณยังคงต้องการ Bootstrap พร้อมการสนับสนุน em และ rem คุณสามารถดูได้ที่https://github.com/ivayloc/twbs-rem-emไม่จำเป็นต้องทำการคำนวณใด ๆ เพื่อแปลงพิกเซลในหน่วย rem หรือ em มีการสร้างขึ้น@mixinsสำหรับสิ่งนี้ - @include rem(property, values)- เช่นกันทางเลือกกลับเป็น px และสำหรับการแปลง em ที่คุณสามารถem(value)ใช้ได้

ในขณะที่ฉันใช้ Bootstrap อย่างกว้างขวางมีพื้นที่บางส่วนที่การเข้าถึงใช้เครื่องเขียนด้านหลัง ฉันเดาว่ามีการแลกเปลี่ยนที่หลีกเลี่ยงไม่ได้กับแพลตฟอร์มที่ใช้กันอย่างแพร่หลาย

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

rems เป็นอีกทางเลือกหนึ่ง แต่การรองรับเบราว์เซอร์ยังคงมีปัญหา

คุณสามารถสร้าง rems mixin ของคุณเองและแทนที่ทุกบรรทัดที่น้อยลงซึ่งใช้ตัวแปรขนาดตัวอักษรพื้นฐาน

นั่นคือความสวยงามของ bootstrap - และเฟรมเวิร์กแบบนี้ - เป็นฐานที่มั่นคงในการทำงาน

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

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

ฉันคิดว่าเป็นเพราะแนวทางแรกของเดสก์ท็อป Twitter Bootstrap ตอบสนองได้ดี แต่เป็นวิธีการ "ลดระดับอย่างสง่างาม"