HTML CSS JAVASCRIPT SQL PYTHON PHP HOW TO W3.CSS JAVA JQUERY C++ R React
ภาษาไทย Afrikaans العربية čeština Deutsch Español Français हिन्दी Bahasa Indonesia Italiano 日本語 한국어 မြန်မာဘာသာ Nederlands Polski Português Русский Türkçe Tiếng Việt

กวดวิชาCSS

CSS HOME บทนำ CSS ไวยากรณ์ CSS ตัวเลือก CSS CSS วิธีการ ความคิดเห็น CSS CSS สี
สี RGB HEX HSL
พื้นหลัง CSS
สีพื้นหลัง ภาพพื้นหลัง เล่นซ้ำพื้นหลัง ไฟล์แนบพื้นหลัง พื้นหลังชวเลข
CSS Borders
พรมแดน ความกว้างของเส้นขอบ เส้นขอบสี ชายแดน ชวเลขชายแดน ขอบมน
CSS Margins
ระยะขอบ มาร์จิ้นยุบ
CSS Padding CSS ความสูง/ความกว้าง โมเดลกล่อง CSS CSS Outline
เค้าร่าง ความกว้างโครงร่าง เค้าร่างสี เค้าร่างชวเลข ออฟเซ็ตเค้าร่าง
CSS Text
สีข้อความ การจัดตำแหน่งข้อความ ตกแต่งข้อความ การแปลงข้อความ ระยะห่างข้อความ ข้อความเงา
แบบอักษร CSS
ตระกูลอักษร แบบอักษรเว็บปลอดภัย แบบอักษรสำรอง รูปแบบตัวอักษร ขนาดตัวอักษร แบบอักษร Google การจับคู่แบบอักษร อักษรย่อ
ไอคอน CSS ลิงค์ CSS รายการ CSS ตาราง CSS
ขอบโต๊ะ ขนาดโต๊ะ การจัดตำแหน่งตาราง สไตล์ตาราง ตารางตอบสนอง
จอแสดงผล CSS CSS ความกว้างสูงสุด ตำแหน่ง CSS CSS Z-ดัชนี CSS Overflow CSS Float
ลอย ชัดเจน ตัวอย่างลอย
CSS Inline-block CSS Align CSS Combinators CSS Pseudo-class CSS Pseudo-element CSS ความทึบ แถบนำทาง CSS
แถบนำทาง แถบนำทางแนวตั้ง แถบนำทางแนวนอน
CSS Dropdowns CSS Image Gallery CSS Image Sprites CSS Attr Selectors แบบฟอร์ม CSS CSS Counters เค้าโครงเว็บไซต์ CSS หน่วย CSS ความจำเพาะของ CSS CSS !สำคัญ ฟังก์ชันคณิตศาสตร์ CSS

CSS ขั้นสูง

CSS มุมโค้งมน รูปภาพ CSS Border พื้นหลัง CSS CSS สี คำหลักสี CSS CSS Gradients
การไล่ระดับสีเชิงเส้น Radial Gradients Conic Gradients
CSS Shadows
Shadow Effects Box Shadow
เอฟเฟกต์ข้อความ CSS CSS Web Fonts การแปลง CSS 2D การแปลง CSS 3D การเปลี่ยน CSS ภาพเคลื่อนไหว CSS CSS Tooltips CSS สไตล์รูปภาพ ภาพสะท้อน CSS CSS วัตถุพอดี CSS วัตถุตำแหน่ง CSS Masking ปุ่ม CSS CSS Pagination CSS หลายคอลัมน์ ส่วนต่อประสานผู้ใช้ CSS ตัวแปร CSS
The var() Function Overriding Variables Variables and JavaScript Variables in Media Queries
ขนาดกล่อง CSS CSS Media Queries ตัวอย่าง CSS MQ CSS Flexbox
CSS Flexbox CSS Flex Container CSS Flex Items CSS Flex Responsive

CSS Responsive

แนะนำ RWD วิวพอร์ต RWD RWD Grid View แบบสอบถามสื่อ RWD รูปภาพ RWD วิดีโอ RWD กรอบงาน RWD เทมเพลต RWD

CSS Grid

บทนำกริด คอนเทนเนอร์กริด รายการกริด

CSS SASS

กวดวิชา SASS

ตัวอย่างCSS

เทมเพลต CSS ตัวอย่าง CSS แบบทดสอบ CSS แบบฝึกหัด CSS ใบรับรอง CSS

การอ้างอิงCSS

การอ้างอิง CSS ตัวเลือก CSS ฟังก์ชัน CSS CSS อ้างอิง Aural CSS Web Safe Fonts CSS Animable หน่วย CSS ตัวแปลง CSS PX-EM CSS สี ค่าสี CSS ค่าดีฟอลต์ CSS รองรับเบราว์เซอร์ CSS

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

❮ ก่อนหน้า ถัดไป ❯

Responsive Web Design คืออะไร?

การออกแบบเว็บที่ตอบสนองทำให้หน้าเว็บของคุณดูดีบนทุกอุปกรณ์

การออกแบบเว็บแบบ Responsive ใช้เฉพาะ HTML และ CSS

การออกแบบเว็บที่ตอบสนองตามอุปกรณ์ไม่ใช่โปรแกรมหรือ JavaScript

การออกแบบเพื่อประสบการณ์ที่ดีที่สุดสำหรับผู้ใช้ทุกคน

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

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



เดสก์ทอป

ยาเม็ด

โทรศัพท์

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

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



❮ ก่อนหน้า ถัดไป ❯