พื้นที่เขียนโค้ดด้วย AI
เลย์เอาต์ CSS แบบตอบสนอง
เริ่มจากเลย์เอาต์แคบ
● ● ●Webday Studio●
ขั้นตอนการทำงาน · เลย์เอาต์ CSS แบบตอบสนอง ×
.workspace {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.workspace > * { min-width: 0; }✳เริ่มจากเลย์เอาต์แคบ
✓ การเปลี่ยนแปลงตรวจสอบก่อนนำไปใช้ ↗
ภาพประกอบพื้นที่ทำงาน
ตรวจสอบก่อนนำไปใช้
เปรียบเทียบการทำงานจริงกับผลที่คาดหวัง หากการตรวจสอบไม่ผ่าน ให้หาสาเหตุก่อนแก้ไขเพิ่มเติม
โมเดล
ตั้งค่า endpoint ที่รองรับ OpenAI หรือ Anthropic ด้วย URL หลักและคีย์ API หากจำเป็น ทดสอบการเชื่อมต่อ เซิร์ฟเวอร์โมเดลในเครื่องต้องทำงานอยู่ เครื่องมือระยะไกลอาจส่งข้อมูลแยกต่างหาก
โปรเจกต์
ใส่ป้ายยาวและบล็อกโค้ดในกริดแล้วแก้การย่อองค์ประกอบแทนซ่อนเนื้อหาที่ล้น
ขั้นตอนการทำงาน
.workspace {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.workspace > * { min-width: 0; }