เว็บบอร์ด PHP เว็บส่งเสริมการเรียนรู้ Hosting CRM ERP Server Programming ถาม-ตอบปัญหา

@import url("normalize.css?v=3.2") ;
@import url("base.css?v=3.2");
@import url("utilities.css?v=3.2");
@import url("common.css?v=3.2");
@import url("links.css?v=3.2");
@import url("content.css?v=3.2");
@import url("buttons.css?v=3.2");
@import url("cp.css?v=3.2");
@import url("forms.css?v=3.2");
@import url("icons.css?v=3.2");
@import url("colours.css?v=3.2");
@import url("responsive.css?v=3.2");
@import url("common_moblie.css?v=3.2")  screen and (max-width: 768px);//แสดงผลเฉพาะบนหน้าจอมือถือ
@import url("content_moblie.css?v=3.2")  screen and (max-width: 768px);//แสดงผลเฉพาะบนหน้าจอมือถือ
@import url("responsive_moblie.css?v=3.2")  screen and (max-width: 768px); //แสดงผลเฉพาะบนหน้าจอมือถือ

ในการปรับผลลัพธ์การแสดงของเว็บไซต์เพื่อ ที่จะทำให้สามารถรองรับการใช้งานกับอุปกรณ์ต่างๆได้ ทั้ง ใน มือถือ หรือ pc ก็ตาม ให้มีความสวยงามนั้น จำเป็นต้องใช้ความสามารถด้าน css และ [url=https://www.mindphp.com/คู่มือ/73-คืออะไร/2026-html-คืออะไร.html]html[/url] โดยใหญ่นั้นการที่จะทำให้หน้าเว็บไซต์จะสามารถที่จะแสดงผลได้ทั้งบน มือถือ หรือ pc นั้นจะเป็นการปรับขนาดของ html โดยจะใช้ [url=https://www.mindphp.com/คู่มือ/73-คืออะไร/2193-css-คืออะไร.html]css[/url] กำกับแต่ในแสดงผลที่ผุ้ใช้ได้มองเห็นผ่าน หน้าจอ ซึ่งในการสร้าง css สำหรับใช้กับเว็บไซต์ หรือระบบที่มีรายลายๆมาๆนั้น อาจจะต้องมีการแยกไฟล์ css ออกเป็นส่วนๆตามประเภทการแสดง เช่น กลุ่มของอักษร กลุ่มของสี หรือ กลุ่มของขนาดช่องกรอกข้อมูล แต่ทั้งนี้ถ้าหากผู้ที่พัฒนานั้นมีการสร้างไฟล์ css ไว้มากมายหลายไฟล์ อาจจะทำให้มีปัญหาในขั้นตอนการเรียกใช้งานเพราะจะต้องเขียนโคดเพื่อเรียก css หลายบรรทัด แต่ก็มีวิธีการที่จะช่วยให้ลดจำนวนบรรทัดในการเรียกไฟล์ลงได้ โดยการใช้ [url=https://www.mindphp.com/คู่มือ/63-ฟังก์ชั่น-php.html]ฟังชั่น[/url] @import css มาช่วย เพราะจะทำให้ง่ายและสวกต่อการปรับ css ในตอนอย่างจะเปลี่ยน และทั้งนี้ยังสามารถกำหนด css ที่เป็นส่วนเล็กๆน้อยที่ใช้สำหรับการแสดงในขนาดหน้าจอที่แตกต่างกันได้ด้วย โดยมีตัวอย่างดังนี้

ถ้าหากไฟล์ css มีทั้งหมดดังรูป

[attachment=1]CSS Knowledge-1.png[/attachment]

เราก็สามารถที่เรียกใช้งงานได้ดังนี้


[code]@import url("normalize.css?v=3.2") ;
@import url("base.css?v=3.2");
@import url("utilities.css?v=3.2");
@import url("common.css?v=3.2");
@import url("links.css?v=3.2");
@import url("content.css?v=3.2");
@import url("buttons.css?v=3.2");
@import url("cp.css?v=3.2");
@import url("forms.css?v=3.2");
@import url("icons.css?v=3.2");
@import url("colours.css?v=3.2");
@import url("responsive.css?v=3.2");
@import url("common_moblie.css?v=3.2") screen and (max-width: 768px);//แสดงผลเฉพาะบนหน้าจอมือถือ
@import url("content_moblie.css?v=3.2") screen and (max-width: 768px);//แสดงผลเฉพาะบนหน้าจอมือถือ
@import url("responsive_moblie.css?v=3.2") screen and (max-width: 768px); //แสดงผลเฉพาะบนหน้าจอมือถือ

[/code]

ตัวอย่างผลการใช้งาน

[attachment=0]ezgif.com-video-to-gif (8).gif[/attachment]

[b]บทความที่เกี่ยวข้อง[/b]

[url=https://www.mindphp.com/forums/viewtopic.php?f=73&t=62459]CSS คำสั่ง background การกำหนดรายละเอียดของพื้นหลัง[/url]
[url=https://www.mindphp.com/forums/viewtopic.php?f=73&t=62327]หน่วยของค่าที่ใช้ต่างๆ ใน CSS[/url]
[url=https://www.mindphp.com/forums/viewtopic.php?f=73&t=62104]การใช้ box-shadow เพื่อสร้างเงาให้ กรอบกล่องข้อความ[/url]