แปลง px เป็น vw Pixels ↔ Viewport width ฟรี ออนไลน์ ปลอดภัย

ทำไมคุณจึงแปลง px เป็น vw

นักออกแบบส่งแบบจำลองที่วาดกว้าง 1440 px พร้อมหัวข้อหลักขนาด 96 px และช่องว่างระหว่างส่วน 72 px บนเว็บจริง หน้าจะถูกดูที่ 360 px บนโทรศัพท์ 820 px บนแท็บเล็ต และ 2560 px บนจอภาพขนาดใหญ่ และนักออกแบบอยากให้หัวข้อคงสัดส่วนกับหน้าจอในแต่ละขนาด หน่วยที่สร้างมาเพื่อสิ่งนั้นคือความกว้างวิวพอร์ต หรือ vw และวิธีไปถึงจุดนั้นจากแบบจำลองคือแปลง px เป็น vw: คุณนำค่าพิกเซลมาหารด้วยความกว้างที่ใช้วาดการออกแบบ แล้วคูณด้วยหนึ่งร้อย หัวข้อ 96 px บนแคนวาส 1440 px คือ 6.67 vw และจากนั้นก็เป็น 6.67 เปอร์เซ็นต์ของหน้าจอใดก็ตามเสมอ

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

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

สูตรและความกว้าง

vw เท่ากับ px หารด้วยความกว้าง คูณหนึ่งร้อย

สูตรคือ vw = px ÷ width × 100 ที่ความกว้างการออกแบบ 1440 px ขนาด 144 px กลายเป็น 10 vw, 72 px กลายเป็น 5 vw และ 24 px กลายเป็น 1.667 vw หน้านี้แสดงความกว้างไว้ข้างผลลัพธ์ เช่น 144 px = 10 vw (1440 px) เพื่อให้คุณเห็นว่าสมมติอะไรไว้ หนึ่ง vw คือหนึ่งในร้อยของความกว้างวิวพอร์ต ดังนั้นหน้าต่างกว้าง 1000 px จะมี 1 vw เท่ากับ 10 px

1440 มาจากไหน

1440 px ที่นี่เป็นความกว้างที่มักใช้วาดการออกแบบ เป็นความเคยชินและไม่ใช่มาตรฐาน บางทีมวาดที่ 1280 หลายทีมที่ 1920 และการออกแบบมือถือที่ 375 หรือ 390 ไม่มีคำตอบที่ถูก มีเพียงความกว้างที่ไฟล์ออกแบบของคุณใช้ พิมพ์ของคุณเอง: การแปลงดีเพียงเท่าความกว้างที่คุณให้

การใช้ความกว้างของการออกแบบเอง

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

สิ่งที่การแปลงคงไว้และสิ่งที่คงไว้ไม่ได้

มันคงสัดส่วนของหน้าจอไว้

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

มันให้ค่าเริ่มต้นไม่ได้

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

การปัดเศษ

การหารด้วย 1440 ให้ทศนิยมยาวสำหรับขนาดส่วนใหญ่ ค่าอย่าง 6.6667 vw ใช้ในสไตล์ชีตได้ แต่คุณปัดเป็น 6.67 หรือ 6.7 ได้โดยไม่เห็นความเปลี่ยนแปลง เก็บสองหรือสามหลักหลังจุด มากกว่านั้นเป็นสัญญาณรบกวน

ที่ที่หน่วยวิวพอร์ตช่วยได้

หัวข้อหลักและตัวอักษรแสดงผลขนาดใหญ่

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

ส่วนเต็มความกว้าง

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

งานภาพที่ต้องคงรูปทรง

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

ตัวอักษรลื่นไหลที่มีขีดจำกัด

เมื่อใช้ร่วมกับ clamp() vw ให้ตัวอักษรที่ขยายอย่างราบรื่นระหว่างค่าต่ำสุดและค่าสูงสุด นี่คือเทคนิคที่สไตล์ชีตสมัยใหม่ใช้กับหัวข้อ และกล่าวถึงด้านล่าง

ที่ที่หน่วยวิวพอร์ตทำร้าย

ข้อความเนื้อหาใน vw ล้วน

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

ขอบเขตที่เล็กและใหญ่สุดขั้ว

ที่ความกว้าง 320 px หัวข้อ 6.67 vw คือ 21 px ซึ่งอาจเล็กเกินไป ที่ความกว้าง 2560 px คือ 171 px ซึ่งใหญ่มหึมา หากไม่มีขีดจำกัด สัดส่วนที่ดูถูกต้องที่ 1440 อาจไร้เหตุผลที่ขอบ

แถบเลื่อน

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

เทคนิค clamp

การตั้งพื้นและเพดาน

ฟังก์ชัน CSS clamp(min, preferred, max) รับค่าต่ำสุด ค่าที่ต้องการ และค่าสูงสุด สำหรับตัวอักษร ให้เขียนค่าต่ำสุดและสูงสุดเป็น rem และค่าที่ต้องการเป็น vw บวกพจน์ rem: font-size: clamp(2rem, 1rem + 4vw, 6rem) ขนาดเติบโตตามหน้าต่างระหว่าง 32 ถึง 96 px และไม่เกินปลายทั้งสองด้าน เพราะส่วนหนึ่งเป็น rem ข้อความจึงยังเคารพการตั้งค่าของผู้อ่าน

วิธีสร้างพจน์กลาง

เลือกความกว้างหน้าจอสองค่าและขนาดที่คุณต้องการที่แต่ละค่า ตัวอย่างเช่น 32 px ที่กว้าง 360 px และ 96 px ที่กว้าง 1440 px ความชันคือ (96 − 32) ÷ (1440 − 360) = 0.0593 px ต่อ px ของความกว้าง ซึ่งคือ 5.93 vw และจุดตัดคือ 32 − 0.0593 × 360 = 10.67 px ประมาณ 0.667 rem พจน์ที่ต้องการจึงเป็น 0.667rem + 5.93vw ตัวแปลงช่วยในส่วน vw และเลขคณิตหนึ่งนาทีทำส่วนที่เหลือ

ทำไมนี่จึงเป็นสมดุลที่ถูกต้อง

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

วิธีแปลง px เป็น vw ที่นี่

พิมพ์ค่าพิกเซล

ป้อนขนาดเป็นพิกเซลในช่องแรก รับทศนิยมได้

ตั้งความกว้างของการออกแบบ

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

คัดลอกค่า vw

ใช้ตัวเลขใน CSS ของคุณพร้อมหน่วย เช่น font-size: 6.67vw สำหรับข้อความ ให้ใส่ไว้ใน clamp() พร้อมขีดจำกัดเป็น rem

หน่วยเหล่านี้มาจากไหน

พิกเซล CSS

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

หน่วยวิวพอร์ต

vw มาพร้อมกับการออกแบบที่ตอบสนอง: หนึ่งในร้อยของความกว้างวิวพอร์ต ไม่ว่าจะเป็นเท่าใด มันอยู่เคียงข้าง rem ซึ่งสัมพัทธ์กับขนาดตัวอักษรราก และ em ซึ่งสัมพัทธ์กับองค์ประกอบ หากคุณต้องการขนาดที่สัมพัทธ์กับข้อความแทนที่จะเป็นหน้าจอ ให้ แปลง px เป็น rem

กับดักเมื่อแปลง px เป็น vw

ใช้ความกว้างการออกแบบผิด

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

ลืมการออกแบบมือถือ

หลายทีมมีแบบจำลองสองแบบ แบบหนึ่งสำหรับเดสก์ท็อปและอีกแบบสำหรับโทรศัพท์ หัวข้อที่ 96 px ในแบบแรกและ 40 px ในแบบที่สองไม่ใช่ค่า vw เดียว ใช้ความกว้างสองค่า การแปลงสองครั้ง และ clamp เพื่อเชื่อมกัน

ใส่ทั้งหน้าเป็น vw

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

มองข้ามปัญหาการซูม

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

คำถามที่ผู้คนถามก่อนแปลง

100 px เป็นกี่ vw

ที่ความกว้างการออกแบบ 1440 px ประมาณ 6.94 vw

ความกว้างการออกแบบที่ดีที่สุดที่ควรใช้คืออะไร

ค่าที่แบบจำลองของคุณถูกวาด ไม่มีค่าเริ่มต้นสากล

vw ดีกว่า rem หรือไม่

ทำหน้าที่ต่างกัน rem ตามขนาดข้อความของผู้อ่าน vw ตามหน้าต่าง ใช้แต่ละอย่างกับสิ่งที่มันทำได้ดี

ฉันใช้ vw กับขนาดตัวอักษรได้หรือไม่

ได้ แต่ให้ใส่ใน clamp() พร้อมขีดจำกัดเป็น rem เพื่อให้ข้อความอ่านง่ายและยังซูมได้

ตัวเลขของฉันถูกอัปโหลดหรือไม่

ไม่ การคำนวณทำในเบราว์เซอร์ของคุณ และไม่มีสิ่งใดถูกส่งไปที่ใด

ฉันจะย้อนกลับได้อย่างไร

ด้วย แปลง vw เป็น px ซึ่งคูณด้วยความกว้างแทนที่จะหาร

เลือกให้ดีเมื่อแปลง px เป็น vw

ตัดสินใจว่าอะไรควรปรับตามหน้าจอ

ตัวอักษรหัวข้อหลัก ช่องว่างใหญ่ และงานภาพ: ใช่ ข้อความเนื้อหา เส้นขอบ ตัวควบคุมเล็ก ๆ: ไม่ รายการค่า vw ของคุณยิ่งสั้น หน้าก็ยิ่งแข็งแรง

แปลงในขั้นตอนการออกแบบ

หากคุณแปลง px เป็น vw ขณะอ่านแบบจำลอง คุณจะเห็นทันทีว่าค่าใดออกมาแปลกและขอค่าที่เรียบร้อยกว่าจากนักออกแบบได้ หัวข้อที่ออกมาเป็น 6.6667 vw ชวนให้คุยกันเรื่องทำให้เป็น 6.5 หรือ 7

จดความกว้างไว้

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

จากแบบจำลองสู่สไตล์ชีตที่ลื่นไหล

ทำรายการขนาดที่ควรปรับ

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

ตรวจเฟรมมือถือแยกต่างหาก

หากมีแบบจำลองโทรศัพท์ ให้อ่านองค์ประกอบเดียวกันที่ความกว้างของมัน ชื่อเรื่อง 96 px บนเฟรม 1440 px และ 40 px บนเฟรม 375 px ไม่เข้ากับค่า vw เดียว ซึ่งเป็นสัญญาณให้ใช้ clamp: ขนาดโทรศัพท์กลายเป็นพื้น ขนาดเดสก์ท็อปเป็นเพดาน และพจน์ vw ทำงานตรงกลาง เมื่อคุณแปลง px เป็น vw สำหรับแต่ละเฟรม ตัวเลขสองค่านั้นกำหนดความชัน

ตรวจที่ความกว้างสามค่า

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

ไม่ใช้หน่วยนี้กับข้อความยาว

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

ตัวแปลงที่เกี่ยวข้อง

กลุ่มเครื่องมือเดียวกันครอบคลุมการแปลงใกล้เคียง หากต้องการกลับไปเป็นพิกเซล ใช้ แปลง vw เป็น px สำหรับขนาดสัมพัทธ์กับราก มี แปลง px เป็น rem และ แปลง rem เป็น px และสำหรับขนาดสัมพัทธ์กับองค์ประกอบ มี แปลง px เป็น em และ แปลง em เป็น px สำหรับสีของสไตล์ชีตเดียวกัน แปลง HEX เป็น RGB และ แปลง HEX เป็น HSL จัดการกับสัญกรณ์

ตัวอย่างการใช้งานจริง

สมมติว่าแลนดิงเพจถูกออกแบบที่ 1440 px โดยมีชื่อเรื่องหลัก 96 px และช่องว่าง 72 px เหนือมัน คุณพิมพ์ 96 และอ่านได้ 6.667 vw พิมพ์ 72 และอ่านได้ 5 vw บนหน้าต่าง 1000 px ชื่อเรื่องคือ 66.7 px และช่องว่าง 50 px ตามสัดส่วน แต่บนโทรศัพท์กว้าง 360 px ชื่อเรื่องจะเป็น 24 px ซึ่งเล็กกว่าที่คุณต้องการ คุณจึงเขียนชื่อเรื่องเป็น clamp(2.25rem, 1rem + 5vw, 6rem) ได้พื้น 36 px และเพดาน 96 px และมันยังอ่านง่ายและซูมได้ ช่องว่างซึ่งไม่มีข้อความคงเป็น vw ธรรมดา

รายการตรวจสอบสั้น ๆ

ก่อนแปลง

หาความกว้างของแบบจำลอง ตัดสินใจว่าขนาดใดควรปรับและขนาดใดไม่ควร

ระหว่างแปลง

พิมพ์ค่าพิกเซลและความกว้างการออกแบบ แล้วคัดลอกตัวเลข vw พร้อมหน่วย

หลังแปลง

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

ข้อผิดพลาดที่พบบ่อย

สมมติว่า 1440 เป็นมาตรฐาน

มันเป็นเพียงความเคยชิน ใช้ความกว้างของคุณเอง

กำหนดขนาดข้อความเนื้อหาด้วย vw อย่างเดียว

ซูมไม่ได้ เพิ่มพจน์ rem และขีดจำกัด

ลืมแถบเลื่อน

100vw กว้างกว่าพื้นที่ที่มองเห็นบนหน้าเดสก์ท็อปที่เลื่อนได้

ตัวเลขของคุณอยู่บนอุปกรณ์ของคุณ

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

สรุป

หากต้องการแปลง px เป็น vw ที่นี่ ให้พิมพ์ขนาดเป็นพิกเซลและความกว้างของการออกแบบ แล้วอ่านผลลัพธ์ทันที โดยใช้สูตร vw = px ÷ width × 100 ความกว้างเริ่มต้นที่ 1440 px ซึ่งเป็นความกว้างที่มักใช้วาดการออกแบบ แต่เป็นความเคยชินและไม่ใช่มาตรฐาน ดังนั้นพิมพ์ของคุณเอง การแปลงคงสัดส่วนของหน้าจอไว้: หนึ่ง vw คือหนึ่งในร้อยของความกว้างวิวพอร์ต ขนาดใน vw จึงขยายและหดตามหน้าต่าง ต่างจาก rem, vw ไม่มีค่าเริ่มต้น เพราะวิวพอร์ตคือความกว้างของหน้าต่างของผู้อ่านเท่าใดก็ได้ สำหรับข้อความ ให้รวม vw กับ rem ภายใน clamp() เพื่อให้อ่านง่ายและซูมได้ ไม่มีสิ่งใดถูกอัปโหลด