logo icon
Taninut.com
image
image แดชบอร์ดรวม
image ประวัติการจอง
image การตั้งค่า
image ออกจากระบบ

153

Update
Delete
Back
 
 
 
Content ID153
Category ID1
Writer ID(not set)
User ID(not set)
Lang Modeth
Content Nameการใช้ media queries สำหรับ responsive
Content Urlการใช้-media-queries-สำหรับ-responsive
Content Desc<div class="group w-full text-gray-800 dark:text-gray-100 border-b border-black/10 dark:border-gray-900/50 dark:bg-gray-800">
<div class="text-base gap-4 md:gap-6 md:max-w-2xl lg:max-w-xl xl:max-w-3xl p-4 md:py-6 flex lg:px-0 m-auto">
<div class="relative flex w-[calc(100%-50px)] flex-col gap-1 md:gap-3 lg:w-[calc(100%-115px)]">
<div class="flex flex-grow flex-col gap-3"></div>
</div>
</div>
</div>
<div class="group w-full text-gray-800 dark:text-gray-100 border-b border-black/10 dark:border-gray-900/50 bg-gray-50 dark:bg-[#444654]">
<div class="text-base gap-4 md:gap-6 md:max-w-2xl lg:max-w-xl xl:max-w-3xl p-4 md:py-6 flex lg:px-0 m-auto">
<div class="w-[30px] flex flex-col relative items-end"></div>
<div class="relative flex w-[calc(100%-50px)] flex-col gap-1 md:gap-3 lg:w-[calc(100%-115px)]">
<div class="flex flex-grow flex-col gap-3">
<div class="min-h-[20px] flex flex-col items-start gap-4 whitespace-pre-wrap">
<div class="markdown prose w-full break-words dark:prose-invert light">
<p><span style="font-family: tahoma, arial, helvetica, sans-serif; font-size: 12pt;">การใช้ media queries สำหรับ responsive จะช่วยให้เว็บไซต์สามารถปรับแต่งเนื้อหาให้เหมาะสมกับขนาดหน้าจอของอุปกรณ์ที่เข้ามาเยี่ยมชมได้ตามความต้องการ โดยปกติแล้วจะมี media queries สำหรับ mobile, desktop, tablet ดังนี้</span></p>
<ol>
<li style="font-family: tahoma, arial, helvetica, sans-serif; font-size: 12pt;"><span style="font-family: tahoma, arial, helvetica, sans-serif; font-size: 12pt;">Mobile โดยทั่วไปใช้ media queries กำหนดเงื่อนไขของหน้าจอที่มีความกว้างไม่เกิน 480px ดังนั้น คำสั่ง media queries สำหรับ mobile จะมีรูปแบบดังนี้</span></li>
</ol>
<div class="bg-black rounded-md mb-4">
<div class="flex items-center relative text-gray-200 bg-gray-800 px-4 py-2 text-xs font-sans justify-between rounded-t-md"></div>
<div class="p-4 overflow-y-auto"><span style="font-family: tahoma, arial, helvetica, sans-serif; font-size: 12pt;"><code class="!whitespace-pre hljs language-scss"><span class="hljs-keyword">@media</span> (<span class="hljs-attribute">max-width</span>: <span class="hljs-number">480px</span>) {
<span class="hljs-comment">/* CSS Code for Mobile Devices */</span>
}
</code></span></div>
</div>
<ol start="2">
<li style="font-family: tahoma, arial, helvetica, sans-serif; font-size: 12pt;"><span style="font-family: tahoma, arial, helvetica, sans-serif; font-size: 12pt;">Desktop โดยทั่วไปใช้ media queries กำหนดเงื่อนไขของหน้าจอที่มีความกว้างมากกว่า 1024px ดังนั้น คำสั่ง media queries สำหรับ desktop จะมีรูปแบบดังนี้</span></li>
</ol>
<div class="bg-black rounded-md mb-4">
<div class="flex items-center relative text-gray-200 bg-gray-800 px-4 py-2 text-xs font-sans justify-between rounded-t-md"></div>
<div class="p-4 overflow-y-auto"><span style="font-family: tahoma, arial, helvetica, sans-serif; font-size: 12pt;"><code class="!whitespace-pre hljs language-scss"><span class="hljs-keyword">@media</span> (<span class="hljs-attribute">min-width</span>: <span class="hljs-number">1024px</span>) {
<span class="hljs-comment">/* CSS Code for Desktop Devices */</span>
}
</code></span></div>
</div>
<ol start="3">
<li style="font-family: tahoma, arial, helvetica, sans-serif; font-size: 12pt;"><span style="font-family: tahoma, arial, helvetica, sans-serif; font-size: 12pt;">Tablet โดยทั่วไปใช้ media queries กำหนดเงื่อนไขของหน้าจอที่มีความกว้างระหว่าง 481px ถึง 1023px ดังนั้น คำสั่ง media queries สำหรับ tablet จะมีรูปแบบดังนี้</span></li>
</ol>
<div class="bg-black rounded-md mb-4">
<div class="flex items-center relative text-gray-200 bg-gray-800 px-4 py-2 text-xs font-sans justify-between rounded-t-md"></div>
<div class="p-4 overflow-y-auto"><span style="font-family: tahoma, arial, helvetica, sans-serif; font-size: 12pt;"><code class="!whitespace-pre hljs language-arduino">@<span class="hljs-built_in">media</span> (min-width: <span class="hljs-number">481</span>px) <span class="hljs-built_in">and</span> (max-width: <span class="hljs-number">1023</span>px) {
<span class="hljs-comment">/* CSS Code for Tablet Devices */</span>
}
</code></span></div>
</div>
<p><span style="font-family: tahoma, arial, helvetica, sans-serif; font-size: 12pt;">สำหรับคำสั่ง media queries สำหรับการกำหนด portrait และ landscape จะใช้เพื่อกำหนดเงื่อนไขของหน้าจอที่มีการแนวตั้งหรือแนวนอน ดังนี้</span></p>
<ol start="4">
<li style="font-family: tahoma, arial, helvetica, sans-serif; font-size: 12pt;"><span style="font-family: tahoma, arial, helvetica, sans-serif; font-size: 12pt;">Portrait โดยทั่วไปใช้ media queries กำหนดเงื่อนไขของหน้าจอที่เป็นแนวตั้ง คือความยาวมากกว่าความกว้าง ดังนั้น คำสั่ง media queries สำหรับการกำหนดเงื่อนไขของหน้าจอที่เป็นแนวตั</span></li>
</ol>
</div>
</div>
</div>
<div class="flex justify-between lg:block"></div>
</div>
</div>
</div>
<div class="group w-full text-gray-800 dark:text-gray-100 border-b border-black/10 dark:border-gray-900/50 bg-gray-50 dark:bg-[#444654]">
<div class="text-base gap-4 md:gap-6 md:max-w-2xl lg:max-w-xl xl:max-w-3xl p-4 md:py-6 flex lg:px-0 m-auto">
<div class="relative flex w-[calc(100%-50px)] flex-col gap-1 md:gap-3 lg:w-[calc(100%-115px)]">
<div class="flex flex-grow flex-col gap-3">
<div class="min-h-[20px] flex flex-col items-start gap-4 whitespace-pre-wrap">
<div class="markdown prose w-full break-words dark:prose-invert light">
<div class="bg-black rounded-md mb-4">
<div class="flex items-center relative text-gray-200 bg-gray-800 px-4 py-2 text-xs font-sans justify-between rounded-t-md"></div>
<div class="p-4 overflow-y-auto"><span style="font-family: tahoma, arial, helvetica, sans-serif; font-size: 12pt;"><code class="!whitespace-pre hljs language-scss"><span class="hljs-keyword">@media</span> (<span class="hljs-attribute">orientation</span>: portrait) {
<span class="hljs-comment">/* CSS Code for Portrait Orientation */</span>
}
</code></span></div>
</div>
<ol start="5">
<li style="font-family: tahoma, arial, helvetica, sans-serif; font-size: 12pt;"><span style="font-family: tahoma, arial, helvetica, sans-serif; font-size: 12pt;">Landscape โดยทั่วไปใช้ media queries กำหนดเงื่อนไขของหน้าจอที่เป็นแนวนอน คือความกว้างมากกว่าความยาว ดังนั้น คำสั่ง media queries สำหรับการกำหนดเงื่อนไขของหน้าจอที่เป็นแนวนอนจะมีรูปแบบดังนี้</span></li>
</ol>
<div class="bg-black rounded-md mb-4">
<div class="flex items-center relative text-gray-200 bg-gray-800 px-4 py-2 text-xs font-sans justify-between rounded-t-md"></div>
<div class="p-4 overflow-y-auto"><span style="font-family: tahoma, arial, helvetica, sans-serif; font-size: 12pt;"><code class="!whitespace-pre hljs language-scss"><span class="hljs-keyword">@media</span> (<span class="hljs-attribute">orientation</span>: landscape) {
<span class="hljs-comment">/* CSS Code for Landscape Orientation */</span>
}
</code></span></div>
</div>
<p><span style="font-family: tahoma, arial, helvetica, sans-serif; font-size: 12pt;">การใช้ media queries สำหรับ responsive และการกำหนดเงื่อนไขของหน้าจอให้เหมาะสมกับอุปกรณ์ที่ผู้ใช้งานเข้ามาเยี่ยมชมเว็บไซต์นั้น จะช่วยให้เว็บไซต์มีประสิทธิภาพและปรับตัวได้ดีกว่าเว็บไซต์ที่ไม่ได้ใช้ media queries.</span><br><br></p>
</div>
</div>
</div>
<div class="flex justify-between lg:block"></div>
</div>
</div>
</div>
<div class="group w-full text-gray-800 dark:text-gray-100 border-b border-black/10 dark:border-gray-900/50 bg-gray-50 dark:bg-[#444654]">
<div class="text-base gap-4 md:gap-6 md:max-w-2xl lg:max-w-xl xl:max-w-3xl p-4 md:py-6 flex lg:px-0 m-auto">
<div class="relative flex w-[calc(100%-50px)] flex-col gap-1 md:gap-3 lg:w-[calc(100%-115px)]">
<div class="flex flex-grow flex-col gap-3">
<div class="min-h-[20px] flex flex-col items-start gap-4 whitespace-pre-wrap">
<div class="markdown prose w-full break-words dark:prose-invert light">
<p><span style="font-family: tahoma, arial, helvetica, sans-serif; font-size: 12pt;">ยังมี media queries อื่นๆ ที่ใช้สำหรับ responsive design อีกมากมาย ตัวอย่างเช่น</span></p>
<ol start="6">
<li style="font-family: tahoma, arial, helvetica, sans-serif; font-size: 12pt;"><span style="font-family: tahoma, arial, helvetica, sans-serif; font-size: 12pt;">Retina display โดยทั่วไปใช้ media queries กำหนดเงื่อนไขของหน้าจอที่มี density ของ pixel สูง เช่น Retina display ของ iPhone ดังนั้น คำสั่ง media queries สำหรับ Retina display จะมีรูปแบบดังนี้</span></li>
</ol>
<div class="bg-black rounded-md mb-4">
<div class="flex items-center relative text-gray-200 bg-gray-800 px-4 py-2 text-xs font-sans justify-between rounded-t-md"></div>
<div class="p-4 overflow-y-auto"><span style="font-family: tahoma, arial, helvetica, sans-serif; font-size: 12pt;"><code class="!whitespace-pre hljs language-scss"><span class="hljs-keyword">@media</span> (<span class="hljs-attribute">-webkit-min-device-pixel-ratio</span>: <span class="hljs-number">2</span>), (<span class="hljs-attribute">min-resolution</span>: <span class="hljs-number">192dpi</span>) {
<span class="hljs-comment">/* CSS Code for Retina Display */</span>
}
</code></span></div>
</div>
<ol start="7">
<li style="font-family: tahoma, arial, helvetica, sans-serif; font-size: 12pt;"><span style="font-family: tahoma, arial, helvetica, sans-serif; font-size: 12pt;">Print โดยทั่วไปใช้ media queries สำหรับการพิมพ์เพื่อกำหนดการแสดงผลของหน้าเว็บไซต์ที่ถูกพิมพ์ คำสั่ง media queries สำหรับการพิมพ์จะมีรูปแบบดังนี้</span></li>
</ol>
<div class="bg-black rounded-md mb-4">
<div class="flex items-center relative text-gray-200 bg-gray-800 px-4 py-2 text-xs font-sans justify-between rounded-t-md"></div>
<div class="p-4 overflow-y-auto"><span style="font-family: tahoma, arial, helvetica, sans-serif; font-size: 12pt;"><code class="!whitespace-pre hljs language-scss"><span class="hljs-keyword">@media</span> print {
<span class="hljs-comment">/* CSS Code for Print */</span>
}
</code></span></div>
</div>
<ol start="8">
<li style="font-family: tahoma, arial, helvetica, sans-serif; font-size: 12pt;"><span style="font-family: tahoma, arial, helvetica, sans-serif; font-size: 12pt;">High DPI Displays โดยทั่วไปใช้ media queries กำหนดเงื่อนไขของหน้าจอที่มี density ของ pixel สูง ซึ่งคำสั่งนี้จะช่วยให้เว็บไซต์แสดงผลได้คมชัดและชัดเจนมากขึ้น คำสั่ง media queries สำหรับ High DPI Displays จะมีรูปแบบดังนี้</span></li>
</ol>
<div class="bg-black rounded-md mb-4">
<div class="flex items-center relative text-gray-200 bg-gray-800 px-4 py-2 text-xs font-sans justify-between rounded-t-md"></div>
<div class="p-4 overflow-y-auto"><span style="font-family: tahoma, arial, helvetica, sans-serif; font-size: 12pt;"><code class="!whitespace-pre hljs language-scss"><span class="hljs-keyword">@media</span> (<span class="hljs-attribute">-webkit-min-device-pixel-ratio</span>: <span class="hljs-number">1.5</span>), (<span class="hljs-attribute">min-resolution</span>: <span class="hljs-number">144dpi</span>) {
<span class="hljs-comment">/* CSS Code for High DPI Displays */</span>
}
</code></span></div>
</div>
<p><span style="font-family: tahoma, arial, helvetica, sans-serif; font-size: 12pt;">การใช้ media queries สำหรับ responsive design จะช่วยให้เว็บไซต์ของคุณปรับตัวได้ดีตามอุปกรณ์ที่ผู้ใช้งานใช้งาน เพื่อให้ผู้ใช้งานมีประสิทธิภาพในการเข้าถึงเนื้อหา และช่วยให้เว็บไซต์ของคุณดูดีและเหมาะสมกับหลายๆ อุปกรณ์ได้.</span></p>
</div>
</div>
</div>
<div class="flex justify-between lg:block"></div>
</div>
</div>
</div>
<div class="group w-full text-gray-800 dark:text-gray-100 border-b border-black/10 dark:border-gray-900/50 bg-gray-50 dark:bg-[#444654]">
<div class="text-base gap-4 md:gap-6 md:max-w-2xl lg:max-w-xl xl:max-w-3xl p-4 md:py-6 flex lg:px-0 m-auto">
<div class="w-[30px] flex flex-col relative items-end">
<div class="text-xs flex items-center justify-center gap-1 invisible absolute left-0 top-2 -ml-4 -translate-x-full group-hover:visible !invisible"></div>
</div>
<div class="relative flex w-[calc(100%-50px)] flex-col gap-1 md:gap-3 lg:w-[calc(100%-115px)]">
<div class="flex flex-grow flex-col gap-3">
<div class="min-h-[20px] flex flex-col items-start gap-4 whitespace-pre-wrap">
<div class="markdown prose w-full break-words dark:prose-invert light">
<ol start="9">
<li style="font-family: tahoma, arial, helvetica, sans-serif; font-size: 12pt;"><span style="font-family: tahoma, arial, helvetica, sans-serif; font-size: 12pt;">Aspect Ratio โดยทั่วไปใช้ media queries สำหรับกำหนดเงื่อนไขของหน้าจอที่มีอัตราส่วนของหน้าจอไม่เท่ากัน เช่น หน้าจอแบบ 16:9 หรือ 4:3 เป็นต้น คำสั่ง media queries สำหรับ Aspect Ratio จะมีรูปแบบดังนี้</span></li>
</ol>
<div class="bg-black rounded-md mb-4">
<div class="flex items-center relative text-gray-200 bg-gray-800 px-4 py-2 text-xs font-sans justify-between rounded-t-md"></div>
<div class="p-4 overflow-y-auto"><span style="font-family: tahoma, arial, helvetica, sans-serif; font-size: 12pt;"><code class="!whitespace-pre hljs language-scss"><span class="hljs-keyword">@media</span> screen <span class="hljs-keyword">and</span> (<span class="hljs-attribute">aspect-ratio</span>: <span class="hljs-number">16</span>/<span class="hljs-number">9</span>) {
<span class="hljs-comment">/* CSS Code for Aspect Ratio 16:9 */</span>
}

<span class="hljs-keyword">@media</span> screen <span class="hljs-keyword">and</span> (<span class="hljs-attribute">aspect-ratio</span>: <span class="hljs-number">4</span>/<span class="hljs-number">3</span>) {
<span class="hljs-comment">/* CSS Code for Aspect Ratio 4:3 */</span>
}
</code></span></div>
</div>
<ol start="10">
<li style="font-family: tahoma, arial, helvetica, sans-serif; font-size: 12pt;"><span style="font-family: tahoma, arial, helvetica, sans-serif; font-size: 12pt;">Viewport Units โดยทั่วไปใช้ viewport units เพื่อกำหนดขนาดและระยะห่างขององค์ประกอบในหน้าเว็บไซต์ โดยสามารถกำหนดค่าขนาดและระยะห่างโดยอิงจากขนาดของหน้าจอ คำสั่ง media queries สำหรับ Viewport Units จะมีรูปแบบดังนี้</span></li>
</ol>
<div class="bg-black rounded-md mb-4">
<div class="flex items-center relative text-gray-200 bg-gray-800 px-4 py-2 text-xs font-sans justify-between rounded-t-md"></div>
<div class="p-4 overflow-y-auto"><span style="font-family: tahoma, arial, helvetica, sans-serif; font-size: 12pt;"><code class="!whitespace-pre hljs language-scss"><span class="hljs-keyword">@media</span> screen <span class="hljs-keyword">and</span> (<span class="hljs-attribute">min-width</span>: <span class="hljs-number">50vw</span>) {
<span class="hljs-comment">/* CSS Code for Element with Minimum Width of 50% of Viewport Width */</span>
}

<span class="hljs-keyword">@media</span> screen <span class="hljs-keyword">and</span> (<span class="hljs-attribute">max-height</span>: <span class="hljs-number">50vh</span>) {
<span class="hljs-comment">/* CSS Code for Element with Maximum Height of 50% of Viewport Height */</span>
}
</code></span></div>
</div>
<p><span style="font-family: tahoma, arial, helvetica, sans-serif; font-size: 12pt;">การใช้ media queries ต่างๆ นี้จะช่วยให้เว็บไซต์ของคุณปรับตัวได้ดียิ่งขึ้นตามอุปกรณ์และสภาพแวดล้อมที่ผู้ใช้งานเข้ามาเยี่ยมชมเว็บไซต์นั้นๆ โดยสามารถกำหนดเงื่อนไขของหน้าจอให้เหมาะสมกับอุปกรณ์และสภาพแวดล้อมได้.</span></p>
</div>
</div>
</div>
<div class="flex justify-between lg:block"></div>
</div>
</div>
</div>
<div class="group w-full text-gray-800 dark:text-gray-100 border-b border-black/10 dark:border-gray-900/50 bg-gray-50 dark:bg-[#444654]">
<div class="text-base gap-4 md:gap-6 md:max-w-2xl lg:max-w-xl xl:max-w-3xl p-4 md:py-6 flex lg:px-0 m-auto">
<div class="w-[30px] flex flex-col relative items-end">
<div class="text-xs flex items-center justify-center gap-1 invisible absolute left-0 top-2 -ml-4 -translate-x-full group-hover:visible !invisible"></div>
</div>
<div class="relative flex w-[calc(100%-50px)] flex-col gap-1 md:gap-3 lg:w-[calc(100%-115px)]">
<div class="flex flex-grow flex-col gap-3">
<div class="min-h-[20px] flex flex-col items-start gap-4 whitespace-pre-wrap">
<div class="markdown prose w-full break-words dark:prose-invert light">
<ol start="11">
<li style="font-family: tahoma, arial, helvetica, sans-serif; font-size: 12pt;"><span style="font-family: tahoma, arial, helvetica, sans-serif; font-size: 12pt;">Hover โดยทั่วไปใช้ media queries สำหรับเมื่อผู้ใช้งานเอาเมาส์ไปชี้ไปยังองค์ประกอบบนหน้าเว็บไซต์ เช่น ปุ่ม, ลิงก์, รูปภาพ คำสั่ง media queries สำหรับ Hover จะมีรูปแบบดังนี้</span></li>
</ol>
<div class="bg-black rounded-md mb-4">
<div class="flex items-center relative text-gray-200 bg-gray-800 px-4 py-2 text-xs font-sans justify-between rounded-t-md"></div>
<div class="p-4 overflow-y-auto"><span style="font-family: tahoma, arial, helvetica, sans-serif; font-size: 12pt;"><code class="!whitespace-pre hljs language-scss"><span class="hljs-keyword">@media</span> (<span class="hljs-attribute">hover</span>: <span class="hljs-attribute">hover</span>) {
<span class="hljs-comment">/* CSS Code for Hover State */</span>
}
</code></span></div>
</div>
<ol start="12">
<li style="font-family: tahoma, arial, helvetica, sans-serif; font-size: 12pt;"><span style="font-family: tahoma, arial, helvetica, sans-serif; font-size: 12pt;">Pointer โดยทั่วไปใช้ media queries สำหรับเมื่อผู้ใช้งานใช้ pointer device บนหน้าเว็บไซต์ เช่น เมาส์, แท็บเล็ต, หรือเมืองเรือ คำสั่ง media queries สำหรับ Pointer จะมีรูปแบบดังนี้</span></li>
</ol>
<div class="bg-black rounded-md mb-4">
<div class="flex items-center relative text-gray-200 bg-gray-800 px-4 py-2 text-xs font-sans justify-between rounded-t-md"></div>
<div class="p-4 overflow-y-auto"><span style="font-family: tahoma, arial, helvetica, sans-serif; font-size: 12pt;"><code class="!whitespace-pre hljs language-scss"><span class="hljs-keyword">@media</span> (<span class="hljs-attribute">pointer</span>: coarse) {
<span class="hljs-comment">/* CSS Code for Coarse Pointer */</span>
}

<span class="hljs-keyword">@media</span> (<span class="hljs-attribute">pointer</span>: fine) {
<span class="hljs-comment">/* CSS Code for Fine Pointer */</span>
}
</code></span></div>
</div>
<p><span style="font-family: tahoma, arial, helvetica, sans-serif; font-size: 12pt;">การใช้ media queries สำหรับ Hover และ Pointer จะช่วยให้เว็บไซต์ของคุณปรับตัวได้ดีตามอุปกรณ์และสภาพแวดล้อมที่ผู้ใช้งานเข้ามาเยี่ยมชมเว็บไซต์นั้นๆ และเพิ่มประสิทธิภาพในการใช้งานของผู้ใช้งานด้วย.</span></p>
</div>
</div>
</div>
<div class="flex justify-between lg:block"></div>
</div>
</div>
</div>
<div class="group w-full text-gray-800 dark:text-gray-100 border-b border-black/10 dark:border-gray-900/50 bg-gray-50 dark:bg-[#444654]">
<div class="text-base gap-4 md:gap-6 md:max-w-2xl lg:max-w-xl xl:max-w-3xl p-4 md:py-6 flex lg:px-0 m-auto">
<div class="w-[30px] flex flex-col relative items-end">
<div class="text-xs flex items-center justify-center gap-1 invisible absolute left-0 top-2 -ml-4 -translate-x-full group-hover:visible !invisible"></div>
</div>
<div class="relative flex w-[calc(100%-50px)] flex-col gap-1 md:gap-3 lg:w-[calc(100%-115px)]">
<div class="flex flex-grow flex-col gap-3">
<div class="min-h-[20px] flex flex-col items-start gap-4 whitespace-pre-wrap">
<div class="markdown prose w-full break-words dark:prose-invert light">
<ol start="13">
<li style="font-family: tahoma, arial, helvetica, sans-serif; font-size: 12pt;"><span style="font-family: tahoma, arial, helvetica, sans-serif; font-size: 12pt;">Dark Mode โดยทั่วไปใช้ media queries สำหรับกำหนดเงื่อนไขเมื่อผู้ใช้งานเปิดใช้งาน Dark Mode บนอุปกรณ์ของตนเอง คำสั่ง media queries สำหรับ Dark Mode จะมีรูปแบบดังนี้</span></li>
</ol>
<div class="bg-black rounded-md mb-4">
<div class="flex items-center relative text-gray-200 bg-gray-800 px-4 py-2 text-xs font-sans justify-between rounded-t-md"></div>
<div class="p-4 overflow-y-auto"><span style="font-family: tahoma, arial, helvetica, sans-serif; font-size: 12pt;"><code class="!whitespace-pre hljs language-scss"><span class="hljs-keyword">@media</span> (<span class="hljs-attribute">prefers-color-scheme</span>: dark) {
<span class="hljs-comment">/* CSS Code for Dark Mode */</span>
}
</code></span></div>
</div>
<ol start="14">
<li style="font-family: tahoma, arial, helvetica, sans-serif; font-size: 12pt;"><span style="font-family: tahoma, arial, helvetica, sans-serif; font-size: 12pt;">Light Mode โดยทั่วไปใช้ media queries สำหรับกำหนดเงื่อนไขเมื่อผู้ใช้งานเปิดใช้งาน Light Mode บนอุปกรณ์ของตนเอง คำสั่ง media queries สำหรับ Light Mode จะมีรูปแบบดังนี้</span></li>
</ol>
<div class="bg-black rounded-md mb-4">
<div class="flex items-center relative text-gray-200 bg-gray-800 px-4 py-2 text-xs font-sans justify-between rounded-t-md"></div>
<div class="p-4 overflow-y-auto"><span style="font-family: tahoma, arial, helvetica, sans-serif; font-size: 12pt;"><code class="!whitespace-pre hljs language-scss"><span class="hljs-keyword">@media</span> (<span class="hljs-attribute">prefers-color-scheme</span>: light) {
<span class="hljs-comment">/* CSS Code for Light Mode */</span>
}
</code></span></div>
</div>
<p><span style="font-family: tahoma, arial, helvetica, sans-serif; font-size: 12pt;">การใช้ media queries สำหรับ Dark Mode และ Light Mode จะช่วยให้เว็บไซต์ของคุณสามารถปรับสีตามการตั้งค่า Dark Mode หรือ Light Mode บนอุปกรณ์ของผู้ใช้งานได้โดยอัตโนมัติ ซึ่งเป็นประโยชน์ในการพัฒนาเว็บไซต์สำหรับผู้ใช้งานที่มีความสะดวกสบายและเป็นมิตรกับผู้ใช้งาน.</span></p>
</div>
</div>
</div>
<div class="flex justify-between lg:block"></div>
</div>
</div>
</div>
<div class="group w-full text-gray-800 dark:text-gray-100 border-b border-black/10 dark:border-gray-900/50 bg-gray-50 dark:bg-[#444654]">
<div class="text-base gap-4 md:gap-6 md:max-w-2xl lg:max-w-xl xl:max-w-3xl p-4 md:py-6 flex lg:px-0 m-auto">
<div class="w-[30px] flex flex-col relative items-end">
<div class="text-xs flex items-center justify-center gap-1 invisible absolute left-0 top-2 -ml-4 -translate-x-full group-hover:visible !invisible"></div>
</div>
<div class="relative flex w-[calc(100%-50px)] flex-col gap-1 md:gap-3 lg:w-[calc(100%-115px)]">
<div class="flex flex-grow flex-col gap-3">
<div class="min-h-[20px] flex flex-col items-start gap-4 whitespace-pre-wrap">
<div class="markdown prose w-full break-words dark:prose-invert light">
<ol start="15">
<li style="font-family: tahoma, arial, helvetica, sans-serif; font-size: 12pt;"><span style="font-family: tahoma, arial, helvetica, sans-serif; font-size: 12pt;">User Preferences โดยทั่วไปใช้ media queries สำหรับเมื่อผู้ใช้งานกำหนดค่าของอุปกรณ์ของตนเอง เช่น ขนาดของฟอนต์, ขนาดของเมนู, สีของพื้นหลัง, และอื่นๆ คำสั่ง media queries สำหรับ User Preferences จะมีรูปแบบดังนี้</span></li>
</ol>
<div class="bg-black rounded-md mb-4">
<div class="flex items-center relative text-gray-200 bg-gray-800 px-4 py-2 text-xs font-sans justify-between rounded-t-md"></div>
<div class="p-4 overflow-y-auto"><span style="font-family: tahoma, arial, helvetica, sans-serif; font-size: 12pt;"><code class="!whitespace-pre hljs language-scss"><span class="hljs-keyword">@media</span> (<span class="hljs-attribute">prefers-reduced-motion</span>: reduce) {
<span class="hljs-comment">/* CSS Code for Reduced Motion */</span>
}

<span class="hljs-keyword">@media</span> (<span class="hljs-attribute">prefers-reduced-transparency</span>: reduce) {
<span class="hljs-comment">/* CSS Code for Reduced Transparency */</span>
}

<span class="hljs-keyword">@media</span> (<span class="hljs-attribute">prefers-contrast</span>: high) {
<span class="hljs-comment">/* CSS Code for High Contrast */</span>
}

<span class="hljs-keyword">@media</span> (<span class="hljs-attribute">prefers-visibility</span>: hidden) {
<span class="hljs-comment">/* CSS Code for Hidden Elements */</span>
}

<span class="hljs-keyword">@media</span> (<span class="hljs-attribute">prefers-contrast</span>: no-preference) {
<span class="hljs-comment">/* CSS Code for No Preference on Contrast */</span>
}
</code></span></div>
</div>
<p><span style="font-family: tahoma, arial, helvetica, sans-serif; font-size: 12pt;">การใช้ media queries สำหรับ User Preferences จะช่วยให้เว็บไซต์ของคุณสามารถปรับตัวได้ดียิ่งขึ้นตามการตั้งค่าของผู้ใช้งาน ซึ่งจะช่วยให้ผู้ใช้งานมีประสิทธิภาพในการใช้งานและสะดวกสบายยิ่งขึ้น.</span></p>
</div>
</div>
</div>
<div class="flex justify-between lg:block"></div>
</div>
</div>
</div>
<div class="group w-full text-gray-800 dark:text-gray-100 border-b border-black/10 dark:border-gray-900/50 bg-gray-50 dark:bg-[#444654]">
<div class="text-base gap-4 md:gap-6 md:max-w-2xl lg:max-w-xl xl:max-w-3xl p-4 md:py-6 flex lg:px-0 m-auto">
<div class="w-[30px] flex flex-col relative items-end">
<div class="text-xs flex items-center justify-center gap-1 invisible absolute left-0 top-2 -ml-4 -translate-x-full group-hover:visible !invisible"></div>
</div>
<div class="relative flex w-[calc(100%-50px)] flex-col gap-1 md:gap-3 lg:w-[calc(100%-115px)]">
<div class="flex flex-grow flex-col gap-3">
<div class="min-h-[20px] flex flex-col items-start gap-4 whitespace-pre-wrap">
<div class="markdown prose w-full break-words dark:prose-invert light">
<ol start="16">
<li style="font-family: tahoma, arial, helvetica, sans-serif; font-size: 12pt;"><span style="font-family: tahoma, arial, helvetica, sans-serif; font-size: 12pt;">Aspect Ratio โดยทั่วไปใช้ media queries สำหรับกำหนดเงื่อนไขเมื่อแสดงภาพหรือวิดีโอโดยให้แสดงในอัตราส่วนที่ต้องการ เช่น อัตราส่วน 16:9, 4:3 หรือ 1:1 คำสั่ง media queries สำหรับ Aspect Ratio จะมีรูปแบบดังนี้</span></li>
</ol>
<div class="bg-black rounded-md mb-4">
<div class="flex items-center relative text-gray-200 bg-gray-800 px-4 py-2 text-xs font-sans justify-between rounded-t-md"></div>
<div class="p-4 overflow-y-auto"><span style="font-family: tahoma, arial, helvetica, sans-serif; font-size: 12pt;"><code class="!whitespace-pre hljs language-scss"><span class="hljs-keyword">@media</span> (<span class="hljs-attribute">aspect-ratio</span>: <span class="hljs-number">16</span>/<span class="hljs-number">9</span>) {
<span class="hljs-comment">/* CSS Code for 16:9 Aspect Ratio */</span>
}

<span class="hljs-keyword">@media</span> (<span class="hljs-attribute">aspect-ratio</span>: <span class="hljs-number">4</span>/<span class="hljs-number">3</span>) {
<span class="hljs-comment">/* CSS Code for 4:3 Aspect Ratio */</span>
}

<span class="hljs-keyword">@media</span> (<span class="hljs-attribute">aspect-ratio</span>: <span class="hljs-number">1</span>/<span class="hljs-number">1</span>) {
<span class="hljs-comment">/* CSS Code for 1:1 Aspect Ratio */</span>
}
</code></span></div>
</div>
<p><span style="font-family: tahoma, arial, helvetica, sans-serif; font-size: 12pt;">การใช้ media queries สำหรับ Aspect Ratio จะช่วยให้เว็บไซต์ของคุณสามารถปรับส่วนสูงและส่วนกว้างของภาพหรือวิดีโอให้เหมาะสมกับอุปกรณ์และสภาพแวดล้อมที่ผู้ใช้งานเข้ามาเยี่ยมชมเว็บไซต์นั้นๆ และช่วยให้ผู้ใช้งานมีประสิทธิภาพในการดูภาพหรือวิดีโอ.</span></p>
</div>
</div>
</div>
<div class="flex justify-between lg:block"></div>
</div>
</div>
</div>
<div class="group w-full text-gray-800 dark:text-gray-100 border-b border-black/10 dark:border-gray-900/50 bg-gray-50 dark:bg-[#444654]">
<div class="text-base gap-4 md:gap-6 md:max-w-2xl lg:max-w-xl xl:max-w-3xl p-4 md:py-6 flex lg:px-0 m-auto">
<div class="w-[30px] flex flex-col relative items-end">
<div class="text-xs flex items-center justify-center gap-1 invisible absolute left-0 top-2 -ml-4 -translate-x-full group-hover:visible !invisible"></div>
</div>
<div class="relative flex w-[calc(100%-50px)] flex-col gap-1 md:gap-3 lg:w-[calc(100%-115px)]">
<div class="flex flex-grow flex-col gap-3">
<div class="min-h-[20px] flex flex-col items-start gap-4 whitespace-pre-wrap">
<div class="markdown prose w-full break-words dark:prose-invert light">
<ol start="17">
<li style="font-family: tahoma, arial, helvetica, sans-serif; font-size: 12pt;"><span style="font-family: tahoma, arial, helvetica, sans-serif; font-size: 12pt;">Viewport Units Viewport Units เป็นหน่วยที่ใช้คำนวณความสูงและความกว้างของหน้าจอของอุปกรณ์ให้เหมาะสม ซึ่งจะช่วยให้เว็บไซต์ของคุณเหมาะสมกับหน้าจอของอุปกรณ์ที่ผู้ใช้งานใช้งานอยู่ คำสั่ง media queries สำหรับ Viewport Units จะมีรูปแบบดังนี้</span></li>
</ol>
<div class="bg-black rounded-md mb-4">
<div class="flex items-center relative text-gray-200 bg-gray-800 px-4 py-2 text-xs font-sans justify-between rounded-t-md"></div>
<div class="p-4 overflow-y-auto"><span style="font-family: tahoma, arial, helvetica, sans-serif; font-size: 12pt;"><code class="!whitespace-pre hljs language-scss"><span class="hljs-keyword">@media</span> (<span class="hljs-attribute">max-width</span>: <span class="hljs-number">100vh</span>) {
<span class="hljs-comment">/* CSS Code for Viewport Height */</span>
}

<span class="hljs-keyword">@media</span> (<span class="hljs-attribute">max-width</span>: <span class="hljs-number">100vw</span>) {
<span class="hljs-comment">/* CSS Code for Viewport Width */</span>
}
</code></span></div>
</div>
<p><span style="font-family: tahoma, arial, helvetica, sans-serif; font-size: 12pt;">Viewport Units มี 2 แบบ คือ vw (Viewport Width) และ vh (Viewport Height) ซึ่งจะใช้คำนวณความกว้างและความสูงของหน้าจอเป็นเปอร์เซ็นต์โดยอ้างอิงจากขนาดของอุปกรณ์ การใช้ media queries สำหรับ Viewport Units จะช่วยให้เว็บไซต์ของคุณปรับขนาดและแสดงผลได้อย่างเหมาะสมกับหน้าจอของผู้ใช้งานในทุกๆ ขนาดและสัดส่วน.</span></p>
</div>
</div>
</div>
<div class="flex justify-between lg:block"></div>
</div>
</div>
</div>
<div class="group w-full text-gray-800 dark:text-gray-100 border-b border-black/10 dark:border-gray-900/50 bg-gray-50 dark:bg-[#444654]">
<div class="text-base gap-4 md:gap-6 md:max-w-2xl lg:max-w-xl xl:max-w-3xl p-4 md:py-6 flex lg:px-0 m-auto">
<div class="w-[30px] flex flex-col relative items-end">
<div class="text-xs flex items-center justify-center gap-1 invisible absolute left-0 top-2 -ml-4 -translate-x-full group-hover:visible !invisible"></div>
</div>
<div class="relative flex w-[calc(100%-50px)] flex-col gap-1 md:gap-3 lg:w-[calc(100%-115px)]">
<div class="flex flex-grow flex-col gap-3">
<div class="min-h-[20px] flex flex-col items-start gap-4 whitespace-pre-wrap">
<div class="markdown prose w-full break-words dark:prose-invert light">
<ol start="18">
<li style="font-family: tahoma, arial, helvetica, sans-serif; font-size: 12pt;"><span style="font-family: tahoma, arial, helvetica, sans-serif; font-size: 12pt;">Scripting การใช้ media queries สำหรับ Scripting จะช่วยให้เราสามารถควบคุมการโหลด script ของเว็บไซต์ได้ โดยการตั้งเงื่อนไขเมื่อผู้ใช้งานเข้าถึงเว็บไซต์โดยใช้อุปกรณ์หรือเครื่องมือที่มีความสามารถในการรับส่งข้อมูลเครือข่ายที่จำกัด เช่น อุปกรณ์ที่ใช้เครือข่าย EDGE หรือ 3G คำสั่ง media queries สำหรับ Scripting จะมีรูปแบบดังนี้</span></li>
</ol>
<div class="bg-black rounded-md mb-4">
<div class="flex items-center relative text-gray-200 bg-gray-800 px-4 py-2 text-xs font-sans justify-between rounded-t-md"></div>
<div class="p-4 overflow-y-auto"><span style="font-family: tahoma, arial, helvetica, sans-serif; font-size: 12pt;"><code class="!whitespace-pre hljs language-scss"><span class="hljs-keyword">@media</span> (<span class="hljs-attribute">scripting</span>: none) {
<span class="hljs-comment">/* CSS Code for No Scripting */</span>
}

<span class="hljs-keyword">@media</span> (<span class="hljs-attribute">scripting</span>: initial-only) {
<span class="hljs-comment">/* CSS Code for Initial Scripting */</span>
}

<span class="hljs-keyword">@media</span> (<span class="hljs-attribute">scripting</span>: enabled) {
<span class="hljs-comment">/* CSS Code for Enabled Scripting */</span>
}
</code></span></div>
</div>
<p><span style="font-family: tahoma, arial, helvetica, sans-serif; font-size: 12pt;">การใช้ media queries สำหรับ Scripting จะช่วยให้เว็บไซต์ของคุณสามารถปรับตัวได้ให้เหมาะสมกับเครื่องมือและอุปกรณ์ที่ผู้ใช้งานใช้งาน เพื่อประสิทธิภาพและประหยัดแหล่งทรัพยากรของเซิร์ฟเวอร์.</span></p>
</div>
</div>
</div>
<div class="flex justify-between lg:block"></div>
</div>
</div>
</div>
<div class="group w-full text-gray-800 dark:text-gray-100 border-b border-black/10 dark:border-gray-900/50 bg-gray-50 dark:bg-[#444654]">
<div class="text-base gap-4 md:gap-6 md:max-w-2xl lg:max-w-xl xl:max-w-3xl p-4 md:py-6 flex lg:px-0 m-auto">
<div class="w-[30px] flex flex-col relative items-end">
<div class="text-xs flex items-center justify-center gap-1 invisible absolute left-0 top-2 -ml-4 -translate-x-full group-hover:visible !invisible"></div>
</div>
<div class="relative flex w-[calc(100%-50px)] flex-col gap-1 md:gap-3 lg:w-[calc(100%-115px)]">
<div class="flex flex-grow flex-col gap-3">
<div class="min-h-[20px] flex flex-col items-start gap-4 whitespace-pre-wrap">
<div class="markdown prose w-full break-words dark:prose-invert light">
<ol start="19">
<li style="font-family: tahoma, arial, helvetica, sans-serif; font-size: 12pt;"><span style="font-family: tahoma, arial, helvetica, sans-serif; font-size: 12pt;">Grid Layout โดย Grid Layout เป็นเทคนิคการออกแบบเว็บไซต์ที่ใช้งานกันอย่างแพร่หลายในปัจจุบัน โดยสามารถกำหนดการแสดงผลของเนื้อหาแบบสองมิติได้ ซึ่งจะช่วยให้ผู้พัฒนาสามารถสร้างเว็บไซต์ที่มีการแสดงผลที่ยืดหยุ่นและเป็นระเบียบได้อย่างง่ายดาย</span></li>
</ol>
<p><span style="font-family: tahoma, arial, helvetica, sans-serif; font-size: 12pt;">การใช้ media queries สำหรับ Grid Layout จะช่วยให้เราสามารถกำหนดเงื่อนไขเมื่อแสดงผล Grid Layout ได้อย่างเหมาะสมกับอุปกรณ์ที่ผู้ใช้งานใช้งานอยู่ เช่น การแสดงผลเป็นแนวนอนหรือแนวตั้ง คำสั่ง media queries สำหรับ Grid Layout จะมีรูปแบบดังนี้</span></p>
<div class="bg-black rounded-md mb-4">
<div class="flex items-center relative text-gray-200 bg-gray-800 px-4 py-2 text-xs font-sans justify-between rounded-t-md"></div>
<div class="p-4 overflow-y-auto"><span style="font-family: tahoma, arial, helvetica, sans-serif; font-size: 12pt;"><code class="!whitespace-pre hljs language-css"><span class="hljs-keyword">@media</span> (<span class="hljs-attribute">min-width</span>: <span class="hljs-number">768px</span>) {
<span class="hljs-comment">/* CSS Code for Grid Layout on Tablet */</span>
<span class="hljs-attribute">display</span>: grid;
<span class="hljs-attribute">grid-template-columns</span>: <span class="hljs-built_in">repeat</span>(auto-fill, <span class="hljs-built_in">minmax</span>(<span class="hljs-number">200px</span>, <span class="hljs-number">1</span>fr));
<span class="hljs-attribute">grid-gap</span>: <span class="hljs-number">20px</span>;
}

<span class="hljs-keyword">@media</span> (<span class="hljs-attribute">min-width</span>: <span class="hljs-number">1024px</span>) {
<span class="hljs-comment">/* CSS Code for Grid Layout on Desktop */</span>
<span class="hljs-attribute">display</span>: grid;
<span class="hljs-attribute">grid-template-columns</span>: <span class="hljs-built_in">repeat</span>(auto-fill, <span class="hljs-built_in">minmax</span>(<span class="hljs-number">300px</span>, <span class="hljs-number">1</span>fr));
<span class="hljs-attribute">grid-gap</span>: <span class="hljs-number">30px</span>;
}
</code></span></div>
</div>
<p><span style="font-family: tahoma, arial, helvetica, sans-serif; font-size: 12pt;">การใช้ media queries สำหรับ Grid Layout จะช่วยให้เว็บไซต์ของคุณสามารถปรับแต่ง Grid Layout ได้อย่างเหมาะสมกับอุปกรณ์ที่ผู้ใช้งานใช้งาน เพื่อความสมบูรณ์และประสิทธิภาพของเว็บไซต์.</span></p>
</div>
</div>
</div>
<div class="flex justify-between lg:block"></div>
</div>
</div>
</div>
<div class="group w-full text-gray-800 dark:text-gray-100 border-b border-black/10 dark:border-gray-900/50 bg-gray-50 dark:bg-[#444654]">
<div class="text-base gap-4 md:gap-6 md:max-w-2xl lg:max-w-xl xl:max-w-3xl p-4 md:py-6 flex lg:px-0 m-auto">
<div class="w-[30px] flex flex-col relative items-end">
<div class="text-xs flex items-center justify-center gap-1 invisible absolute left-0 top-2 -ml-4 -translate-x-full group-hover:visible !invisible"></div>
</div>
<div class="relative flex w-[calc(100%-50px)] flex-col gap-1 md:gap-3 lg:w-[calc(100%-115px)]">
<div class="flex flex-grow flex-col gap-3">
<div class="min-h-[20px] flex flex-col items-start gap-4 whitespace-pre-wrap">
<div class="markdown prose w-full break-words dark:prose-invert light">
<ol start="20">
<li style="font-family: tahoma, arial, helvetica, sans-serif; font-size: 12pt;"><span style="font-family: tahoma, arial, helvetica, sans-serif; font-size: 12pt;">Flexbox Flexbox เป็นเทคนิคการออกแบบเว็บไซต์ที่ใช้งานกันอย่างแพร่หลายในปัจจุบัน โดยสามารถกำหนดการแสดงผลของเนื้อหาแบบหลายมิติได้ ซึ่งจะช่วยให้ผู้พัฒนาสามารถสร้างเว็บไซต์ที่มีการแสดงผลที่ยืดหยุ่นและเป็นระเบียบได้อย่างง่ายดาย</span></li>
</ol>
<p><span style="font-family: tahoma, arial, helvetica, sans-serif; font-size: 12pt;">การใช้ media queries สำหรับ Flexbox จะช่วยให้เราสามารถกำหนดเงื่อนไขเมื่อแสดงผล Flexbox ได้อย่างเหมาะสมกับอุปกรณ์ที่ผู้ใช้งานใช้งานอยู่ เช่น การแสดงผลเป็นแนวนอนหรือแนวตั้ง คำสั่ง media queries สำหรับ Flexbox จะมีรูปแบบดังนี้</span></p>
<div class="bg-black rounded-md mb-4">
<div class="flex items-center relative text-gray-200 bg-gray-800 px-4 py-2 text-xs font-sans justify-between rounded-t-md"></div>
<div class="p-4 overflow-y-auto"><span style="font-family: tahoma, arial, helvetica, sans-serif; font-size: 12pt;"><code class="!whitespace-pre hljs language-css"><span class="hljs-keyword">@media</span> (<span class="hljs-attribute">min-width</span>: <span class="hljs-number">768px</span>) {
<span class="hljs-comment">/* CSS Code for Flexbox on Tablet */</span>
<span class="hljs-attribute">display</span>: flex;
<span class="hljs-attribute">flex-wrap</span>: wrap;
<span class="hljs-attribute">justify-content</span>: center;
}

<span class="hljs-keyword">@media</span> (<span class="hljs-attribute">min-width</span>: <span class="hljs-number">1024px</span>) {
<span class="hljs-comment">/* CSS Code for Flexbox on Desktop */</span>
<span class="hljs-attribute">display</span>: flex;
<span class="hljs-attribute">flex-wrap</span>: wrap;
<span class="hljs-attribute">justify-content</span>: space-between;
}
</code></span></div>
</div>
<p><span style="font-family: tahoma, arial, helvetica, sans-serif; font-size: 12pt;">การใช้ media queries สำหรับ Flexbox จะช่วยให้เว็บไซต์ของคุณสามารถปรับแต่ง Flexbox ได้อย่างเหมาะสมกับอุปกรณ์ที่ผู้ใช้งานใช้งาน เพื่อความสมบูรณ์และประสิทธิภาพของเว็บไซต์.</span></p>
</div>
</div>
</div>
<div class="flex justify-between lg:block"></div>
</div>
</div>
</div>
<div class="group w-full text-gray-800 dark:text-gray-100 border-b border-black/10 dark:border-gray-900/50 bg-gray-50 dark:bg-[#444654]">
<div class="text-base gap-4 md:gap-6 md:max-w-2xl lg:max-w-xl xl:max-w-3xl p-4 md:py-6 flex lg:px-0 m-auto">
<div class="w-[30px] flex flex-col relative items-end">
<div class="text-xs flex items-center justify-center gap-1 invisible absolute left-0 top-2 -ml-4 -translate-x-full group-hover:visible !invisible"></div>
</div>
<div class="relative flex w-[calc(100%-50px)] flex-col gap-1 md:gap-3 lg:w-[calc(100%-115px)]">
<div class="flex flex-grow flex-col gap-3">
<div class="min-h-[20px] flex flex-col items-start gap-4 whitespace-pre-wrap">
<div class="markdown prose w-full break-words dark:prose-invert light">
<ol start="21">
<li style="font-family: tahoma, arial, helvetica, sans-serif; font-size: 12pt;"><span style="font-family: tahoma, arial, helvetica, sans-serif; font-size: 12pt;">Responsive Images การใช้รูปภาพในเว็บไซต์ที่มีความยืดหยุ่นจะต้องใช้เทคนิค Responsive Images เพื่อให้รูปภาพแสดงผลได้อย่างเหมาะสมกับอุปกรณ์ที่ผู้ใช้งานใช้งาน เช่น ขนาดหน้าจอของอุปกรณ์ การแสดงผลในแนวตั้งหรือแนวนอน เป็นต้น</span></li>
</ol>
<p><span style="font-family: tahoma, arial, helvetica, sans-serif; font-size: 12pt;">การใช้งาน Responsive Images จะต้องใช้งานร่วมกับ media queries เพื่อกำหนดขนาดและแสดงผลของรูปภาพ โดยใช้ attribute ของ &lt;img&gt; ดังนี้</span></p>
<div class="bg-black rounded-md mb-4">
<div class="flex items-center relative text-gray-200 bg-gray-800 px-4 py-2 text-xs font-sans justify-between rounded-t-md"></div>
<div class="p-4 overflow-y-auto"><span style="font-family: tahoma, arial, helvetica, sans-serif; font-size: 12pt;"><code class="!whitespace-pre hljs language-php-template"><span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"image.jpg"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"description"</span>
<span class="hljs-attr">srcset</span>=<span class="hljs-string">"image-small.jpg 480w,
image-medium.jpg 768w,
image-large.jpg 1200w"</span>
<span class="hljs-attr">sizes</span>=<span class="hljs-string">"(max-width: 480px) 100vw,
(max-width: 768px) 80vw,
1200px"</span>
&gt;</span>
</span></code></span></div>
</div>
<p><span style="font-family: tahoma, arial, helvetica, sans-serif; font-size: 12pt;">ในตัวอย่างข้างต้นจะกำหนดภาพรวมกับ media queries ดังนี้</span></p>
<ul>
<li style="font-family: tahoma, arial, helvetica, sans-serif; font-size: 12pt;"><span style="font-family: tahoma, arial, helvetica, sans-serif; font-size: 12pt;">ใช้ image-small.jpg เมื่อขนาดหน้าจอไม่เกิน 480px</span></li>
<li style="font-family: tahoma, arial, helvetica, sans-serif; font-size: 12pt;"><span style="font-family: tahoma, arial, helvetica, sans-serif; font-size: 12pt;">ใช้ image-medium.jpg เมื่อขนาดหน้าจอไม่เกิน 768px</span></li>
<li style="font-family: tahoma, arial, helvetica, sans-serif; font-size: 12pt;"><span style="font-family: tahoma, arial, helvetica, sans-serif; font-size: 12pt;">ใช้ image-large.jpg เมื่อขนาดหน้าจอไม่เกิน 1200px</span></li>
</ul>
<p><span style="font-family: tahoma, arial, helvetica, sans-serif; font-size: 12pt;">และกำหนดขนาดภาพเพื่อเลือกภาพที่เหมาะสมกับขนาดหน้าจอดังนี้</span></p>
<ul>
<li style="font-family: tahoma, arial, helvetica, sans-serif; font-size: 12pt;"><span style="font-family: tahoma, arial, helvetica, sans-serif; font-size: 12pt;">ใช้ 100vw เมื่อขนาดหน้าจอไม่เกิน 480px</span></li>
<li style="font-family: tahoma, arial, helvetica, sans-serif; font-size: 12pt;"><span style="font-family: tahoma, arial, helvetica, sans-serif; font-size: 12pt;">ใช้ 80vw เมื่อขนาดหน้าจอไม่เกิน 768px</span></li>
<li style="font-family: tahoma, arial, helvetica, sans-serif; font-size: 12pt;"><span style="font-family: tahoma, arial, helvetica, sans-serif; font-size: 12pt;">ใช้ขนาด 1200px เมื่อขนาดหน้าจอเกิน 768px</span></li>
</ul>
<p><span style="font-family: tahoma, arial, helvetica, sans-serif; font-size: 12pt;">การใช้งาน Responsive Images จะช่วยลดการโหลดของเว็บไซต์ให้เร็วขึ้น และทำให้เว็บไซต์แสดงผลได้อย่างเหมาะสมกับอุปกรณ์ที่ผู้ใช้งานใช้งาน.</span></p>
</div>
</div>
</div>
<div class="flex justify-between lg:block"></div>
</div>
</div>
</div>
<div class="group w-full text-gray-800 dark:text-gray-100 border-b border-black/10 dark:border-gray-900/50 bg-gray-50 dark:bg-[#444654]">
<div class="text-base gap-4 md:gap-6 md:max-w-2xl lg:max-w-xl xl:max-w-3xl p-4 md:py-6 flex lg:px-0 m-auto">
<div class="w-[30px] flex flex-col relative items-end">
<div class="text-xs flex items-center justify-center gap-1 invisible absolute left-0 top-2 -ml-4 -translate-x-full group-hover:visible !invisible"></div>
</div>
<div class="relative flex w-[calc(100%-50px)] flex-col gap-1 md:gap-3 lg:w-[calc(100%-115px)]">
<div class="flex flex-grow flex-col gap-3">
<div class="min-h-[20px] flex flex-col items-start gap-4 whitespace-pre-wrap">
<div class="markdown prose w-full break-words dark:prose-invert light">
<ol start="22">
<li style="font-family: tahoma, arial, helvetica, sans-serif; font-size: 12pt;"><span style="font-family: tahoma, arial, helvetica, sans-serif; font-size: 12pt;">CSS Grid CSS Grid เป็นเทคนิคการออกแบบเว็บไซต์ที่เพิ่มความยืดหยุ่นในการแสดงผลเนื้อหาบนเว็บไซต์ โดยใช้งาน Grid Layout ในการกำหนดเทมเพลตของเว็บไซต์ ซึ่งจะช่วยให้ผู้พัฒนาสามารถสร้างเว็บไซต์ที่มีการแสดงผลที่ยืดหยุ่นและสวยงามได้อย่างง่ายดาย</span></li>
</ol>
<p><span style="font-family: tahoma, arial, helvetica, sans-serif; font-size: 12pt;">การใช้ media queries สำหรับ CSS Grid จะช่วยให้ผู้พัฒนาสามารถกำหนดการแสดงผลของเนื้อหาของเว็บไซต์ให้เหมาะสมกับอุปกรณ์ที่ผู้ใช้งานใช้งาน โดยเราสามารถกำหนด Grid Layout แบบต่างๆ ได้ตามต้องการ ตัวอย่างเช่น</span></p>
<div class="bg-black rounded-md mb-4">
<div class="flex items-center relative text-gray-200 bg-gray-800 px-4 py-2 text-xs font-sans justify-between rounded-t-md"></div>
<div class="p-4 overflow-y-auto"><span style="font-family: tahoma, arial, helvetica, sans-serif; font-size: 12pt;"><code class="!whitespace-pre hljs language-css"><span class="hljs-keyword">@media</span> (<span class="hljs-attribute">min-width</span>: <span class="hljs-number">768px</span>) {
<span class="hljs-selector-class">.grid-container</span> {
<span class="hljs-attribute">display</span>: grid;
<span class="hljs-attribute">grid-template-columns</span>: <span class="hljs-number">1</span>fr <span class="hljs-number">1</span>fr <span class="hljs-number">1</span>fr;
<span class="hljs-attribute">grid-gap</span>: <span class="hljs-number">20px</span>;
}
}

<span class="hljs-keyword">@media</span> (<span class="hljs-attribute">min-width</span>: <span class="hljs-number">1024px</span>) {
<span class="hljs-selector-class">.grid-container</span> {
<span class="hljs-attribute">display</span>: grid;
<span class="hljs-attribute">grid-template-columns</span>: <span class="hljs-number">1</span>fr <span class="hljs-number">1</span>fr <span class="hljs-number">1</span>fr <span class="hljs-number">1</span>fr;
<span class="hljs-attribute">grid-gap</span>: <span class="hljs-number">20px</span>;
}
}
</code></span></div>
</div>
<p><span style="font-family: tahoma, arial, helvetica, sans-serif; font-size: 12pt;">ในตัวอย่างข้างต้น เรากำหนด Grid Layout ให้แสดงผลเป็น 3 คอลัมน์เมื่อขนาดหน้าจอเกิน 768px และกำหนด Grid Layout เป็น 4 คอลัมน์เมื่อขนาดหน้าจอเกิน 1024px</span></p>
<p><span style="font-family: tahoma, arial, helvetica, sans-serif; font-size: 12pt;">การใช้ media queries สำหรับ CSS Grid จะช่วยให้เราสามารถปรับแต่ง Grid Layout ได้อย่างเหมาะสมกับอุปกรณ์ที่ผู้ใช้งานใช้งาน เพื่อความสมบูรณ์และประสิทธิภาพของเว็บไซต์.</span></p>
</div>
</div>
</div>
<div class="flex justify-between lg:block"></div>
</div>
</div>
</div>
<div class="group w-full text-gray-800 dark:text-gray-100 border-b border-black/10 dark:border-gray-900/50 bg-gray-50 dark:bg-[#444654]">
<div class="text-base gap-4 md:gap-6 md:max-w-2xl lg:max-w-xl xl:max-w-3xl p-4 md:py-6 flex lg:px-0 m-auto">
<div class="w-[30px] flex flex-col relative items-end">
<div class="text-xs flex items-center justify-center gap-1 invisible absolute left-0 top-2 -ml-4 -translate-x-full group-hover:visible !invisible"></div>
</div>
<div class="relative flex w-[calc(100%-50px)] flex-col gap-1 md:gap-3 lg:w-[calc(100%-115px)]">
<div class="flex flex-grow flex-col gap-3">
<div class="min-h-[20px] flex flex-col items-start gap-4 whitespace-pre-wrap">
<div class="markdown prose w-full break-words dark:prose-invert light">
<ol start="23">
<li style="font-family: tahoma, arial, helvetica, sans-serif; font-size: 12pt;"><span style="font-family: tahoma, arial, helvetica, sans-serif; font-size: 12pt;">Flexbox Flexbox เป็นเทคนิคการออกแบบเว็บไซต์ที่ช่วยให้เนื้อหาแสดงผลได้อย่างยืดหยุ่นและสวยงาม โดยใช้งาน Flexbox Layout ในการกำหนดการแสดงผลเนื้อหาบนเว็บไซต์ ซึ่งจะช่วยให้ผู้พัฒนาสามารถสร้างเว็บไซต์ที่มีการแสดงผลที่ยืดหยุ่นและสวยงามได้อย่างง่ายดาย</span></li>
</ol>
<p><span style="font-family: tahoma, arial, helvetica, sans-serif; font-size: 12pt;">การใช้ media queries สำหรับ Flexbox จะช่วยให้ผู้พัฒนาสามารถกำหนดการแสดงผลของเนื้อหาของเว็บไซต์ให้เหมาะสมกับอุปกรณ์ที่ผู้ใช้งานใช้งาน โดยเราสามารถกำหนด Flexbox Layout แบบต่างๆ ได้ตามต้องการ ตัวอย่างเช่น</span></p>
<div class="bg-black rounded-md mb-4">
<div class="flex items-center relative text-gray-200 bg-gray-800 px-4 py-2 text-xs font-sans justify-between rounded-t-md"></div>
<div class="p-4 overflow-y-auto"><span style="font-family: tahoma, arial, helvetica, sans-serif; font-size: 12pt;"><code class="!whitespace-pre hljs language-css"><span class="hljs-keyword">@media</span> (<span class="hljs-attribute">min-width</span>: <span class="hljs-number">768px</span>) {
<span class="hljs-selector-class">.flex-container</span> {
<span class="hljs-attribute">display</span>: flex;
<span class="hljs-attribute">flex-wrap</span>: wrap;
<span class="hljs-attribute">justify-content</span>: space-between;
}
}

<span class="hljs-keyword">@media</span> (<span class="hljs-attribute">min-width</span>: <span class="hljs-number">1024px</span>) {
<span class="hljs-selector-class">.flex-container</span> {
<span class="hljs-attribute">display</span>: flex;
<span class="hljs-attribute">flex-wrap</span>: wrap;
<span class="hljs-attribute">justify-content</span>: center;
}
}
</code></span></div>
</div>
<p><span style="font-family: tahoma, arial, helvetica, sans-serif; font-size: 12pt;">ในตัวอย่างข้างต้น เรากำหนด Flexbox Layout ให้แสดงผลเป็น Wrap เมื่อขนาดหน้าจอเกิน 768px และกำหนด Flexbox Layout เมื่อขนาดหน้าจอเกิน 1024px</span></p>
<p><span style="font-family: tahoma, arial, helvetica, sans-serif; font-size: 12pt;">การใช้ media queries สำหรับ Flexbox จะช่วยให้เราสามารถปรับแต่ง Flexbox Layout ได้อย่างเหมาะสมกับอุปกรณ์ที่ผู้ใช้งานใช้งาน เพื่อความสมบูรณ์และประสิทธิภาพของเว็บไซต์.</span></p>
</div>
</div>
</div>
<div class="flex justify-between lg:block"></div>
</div>
</div>
</div>
<div class="group w-full text-gray-800 dark:text-gray-100 border-b border-black/10 dark:border-gray-900/50 dark:bg-gray-800">
<div class="text-base gap-4 md:gap-6 md:max-w-2xl lg:max-w-xl xl:max-w-3xl p-4 md:py-6 flex lg:px-0 m-auto">
<div class="w-[30px] flex flex-col relative items-end"></div>
</div>
</div>
<div class="group w-full text-gray-800 dark:text-gray-100 border-b border-black/10 dark:border-gray-900/50 bg-gray-50 dark:bg-[#444654]">
<div class="text-base gap-4 md:gap-6 md:max-w-2xl lg:max-w-xl xl:max-w-3xl p-4 md:py-6 flex lg:px-0 m-auto">
<div class="w-[30px] flex flex-col relative items-end">
<div class="text-xs flex items-center justify-center gap-1 invisible absolute left-0 top-2 -ml-4 -translate-x-full group-hover:visible !invisible"></div>
</div>
<div class="relative flex w-[calc(100%-50px)] flex-col gap-1 md:gap-3 lg:w-[calc(100%-115px)]">
<div class="flex flex-grow flex-col gap-3">
<div class="min-h-[20px] flex flex-col items-start gap-4 whitespace-pre-wrap">
<div class="markdown prose w-full break-words dark:prose-invert light">
<ol start="24">
<li style="font-family: tahoma, arial, helvetica, sans-serif; font-size: 12pt;"><span style="font-family: tahoma, arial, helvetica, sans-serif; font-size: 12pt;">Responsive Images Responsive Images คือการจัดการรูปภาพในเว็บไซต์เพื่อให้เหมาะสมกับอุปกรณ์ที่ผู้ใช้งานใช้งาน เช่น การปรับขนาดของรูปภาพให้เหมาะสมกับขนาดหน้าจอ หรือการโหลดรูปภาพที่เหมาะสมกับความเร็วของเครือข่ายที่ผู้ใช้งานใช้งาน</span></li>
</ol>
<p><span style="font-family: tahoma, arial, helvetica, sans-serif; font-size: 12pt;">การใช้ media queries สำหรับ Responsive Images จะช่วยให้เราสามารถกำหนดการแสดงผลของรูปภาพให้เหมาะสมกับอุปกรณ์ที่ผู้ใช้งานใช้งาน โดยเราสามารถกำหนดลักษณะของรูปภาพที่จะแสดงผลได้ตามขนาดหน้าจอ และสามารถใช้งานหลายรูปแบบเช่น srcset หรือ sizes สำหรับการเลือกแสดงผลรูปภาพที่เหมาะสม</span></p>
<p><span style="font-family: tahoma, arial, helvetica, sans-serif; font-size: 12pt;">ตัวอย่างเช่น</span></p>
<div class="bg-black rounded-md mb-4">
<div class="flex items-center relative text-gray-200 bg-gray-800 px-4 py-2 text-xs font-sans justify-between rounded-t-md"></div>
<div class="p-4 overflow-y-auto"><span style="font-family: tahoma, arial, helvetica, sans-serif; font-size: 12pt;"><code class="!whitespace-pre hljs language-php-template"><span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"example.jpg"</span> <span class="hljs-attr">srcset</span>=<span class="hljs-string">"example-2x.jpg 2x, example-3x.jpg 3x"</span> <span class="hljs-attr">sizes</span>=<span class="hljs-string">"(max-width: 600px) 100vw, 50vw"</span>&gt;</span>
</span></code></span></div>
</div>
<p><span style="font-family: tahoma, arial, helvetica, sans-serif; font-size: 12pt;">ในตัวอย่างข้างต้น เรากำหนดให้แสดงรูปภาพ example.jpg และสามารถแสดงผลรูปภาพอื่นๆ เช่น example-2x.jpg หรือ example-3x.jpg ได้ตามที่เหมาะสม โดยใช้ srcset และกำหนดขนาดของแต่ละรูปภาพด้วย sizes โดยรูปภาพจะแสดงผลให้เหมาะสมกับขนาดหน้าจอที่ใช้งาน</span></p>
<p><span style="font-family: tahoma, arial, helvetica, sans-serif; font-size: 12pt;">การใช้ media queries สำหรับ Responsive Images จะช่วยให้เราสามารถปรับแต่งการแสดงผลรูปภาพได้อย่างเหมาะสมกับอุปกรณ์ที่ผู้ใช้งานใช้งาน และช่วยให้เว็บไซต์มีปร</span></p>
</div>
</div>
</div>
<div class="flex justify-between lg:block"></div>
</div>
</div>
</div>
<div class="group w-full text-gray-800 dark:text-gray-100 border-b border-black/10 dark:border-gray-900/50 bg-gray-50 dark:bg-[#444654]">
<div class="text-base gap-4 md:gap-6 md:max-w-2xl lg:max-w-xl xl:max-w-3xl p-4 md:py-6 flex lg:px-0 m-auto">
<div class="w-[30px] flex flex-col relative items-end">
<div class="text-xs flex items-center justify-center gap-1 invisible absolute left-0 top-2 -ml-4 -translate-x-full group-hover:visible !invisible"></div>
</div>
<div class="relative flex w-[calc(100%-50px)] flex-col gap-1 md:gap-3 lg:w-[calc(100%-115px)]">
<div class="flex flex-grow flex-col gap-3">
<div class="min-h-[20px] flex flex-col items-start gap-4 whitespace-pre-wrap">
<div class="markdown prose w-full break-words dark:prose-invert light">
<ol start="25">
<li style="font-family: tahoma, arial, helvetica, sans-serif; font-size: 12pt;"><span style="font-family: tahoma, arial, helvetica, sans-serif; font-size: 12pt;">Responsive Typography Responsive Typography คือการปรับแต่งตัวอักษรในเว็บไซต์ให้เหมาะสมกับอุปกรณ์ที่ผู้ใช้งานใช้งาน เช่น การปรับขนาดตัวอักษรให้เหมาะสมกับขนาดหน้าจอ หรือการเปลี่ยนแปลงรูปแบบตัวอักษรเพื่อเพิ่มความอ่านง่ายในอุปกรณ์ต่างๆ</span></li>
</ol>
<p><span style="font-family: tahoma, arial, helvetica, sans-serif; font-size: 12pt;">การใช้ media queries สำหรับ Responsive Typography จะช่วยให้เราสามารถกำหนดการแสดงผลของตัวอักษรให้เหมาะสมกับอุปกรณ์ที่ผู้ใช้งานใช้งาน โดยเราสามารถกำหนดลักษณะของตัวอักษรที่จะแสดงผลได้ตามขนาดหน้าจอ และสามารถใช้งานหลายรูปแบบเช่น font-size หรือ line-height สำหรับการเลือกแสดงผลตัวอักษรที่เหมาะสม</span></p>
<p><span style="font-family: tahoma, arial, helvetica, sans-serif; font-size: 12pt;">ตัวอย่างเช่น</span></p>
<div class="bg-black rounded-md mb-4">
<div class="flex items-center relative text-gray-200 bg-gray-800 px-4 py-2 text-xs font-sans justify-between rounded-t-md"></div>
<div class="p-4 overflow-y-auto"><span style="font-family: tahoma, arial, helvetica, sans-serif; font-size: 12pt;"><code class="!whitespace-pre hljs language-css"><span class="hljs-keyword">@media</span> (<span class="hljs-attribute">max-width</span>: <span class="hljs-number">768px</span>) {
<span class="hljs-selector-tag">body</span> {
<span class="hljs-attribute">font-size</span>: <span class="hljs-number">14px</span>;
<span class="hljs-attribute">line-height</span>: <span class="hljs-number">1.5</span>;
}
}

<span class="hljs-keyword">@media</span> (<span class="hljs-attribute">min-width</span>: <span class="hljs-number">769px</span>) {
<span class="hljs-selector-tag">body</span> {
<span class="hljs-attribute">font-size</span>: <span class="hljs-number">16px</span>;
<span class="hljs-attribute">line-height</span>: <span class="hljs-number">1.6</span>;
}
}
</code></span></div>
</div>
<p><span style="font-family: tahoma, arial, helvetica, sans-serif; font-size: 12pt;">ในตัวอย่างข้างต้น เรากำหนดขนาดตัวอักษรและ line-height ของเว็บไซต์เมื่อขนาดหน้าจอต่ำกว่า 768px และเมื่อขนาดหน้าจอมีขนาดมากกว่า 769px โดยการใช้ media queries สำหรับ Responsive Typography จะช่วยให้เราสามารถปรับแต่งการแสดงผลตัวอักษรได้อย่างเหมาะสมกับอุปกรณ์ที่ผู้ใช้งานใช้งาน และช่วยให้เว็บไซต์มีประสิทธิภาพในการแสดงผลตัวอักษรเพื่อความสมบูรณ์ของเว็</span></p>
</div>
</div>
</div>
<div class="flex justify-between lg:block"></div>
</div>
</div>
</div>
<div class="group w-full text-gray-800 dark:text-gray-100 border-b border-black/10 dark:border-gray-900/50 bg-gray-50 dark:bg-[#444654]">
<div class="text-base gap-4 md:gap-6 md:max-w-2xl lg:max-w-xl xl:max-w-3xl p-4 md:py-6 flex lg:px-0 m-auto">
<div class="w-[30px] flex flex-col relative items-end">
<div class="text-xs flex items-center justify-center gap-1 invisible absolute left-0 top-2 -ml-4 -translate-x-full group-hover:visible !invisible"></div>
</div>
<div class="relative flex w-[calc(100%-50px)] flex-col gap-1 md:gap-3 lg:w-[calc(100%-115px)]">
<div class="flex flex-grow flex-col gap-3">
<div class="min-h-[20px] flex flex-col items-start gap-4 whitespace-pre-wrap">
<div class="markdown prose w-full break-words dark:prose-invert light">
<ol start="26">
<li style="font-family: tahoma, arial, helvetica, sans-serif; font-size: 12pt;"><span style="font-family: tahoma, arial, helvetica, sans-serif; font-size: 12pt;">Responsive Images Responsive Images คือการปรับแต่งการแสดงผลรูปภาพในเว็บไซต์ให้เหมาะสมกับอุปกรณ์ที่ผู้ใช้งานใช้งาน เช่น การปรับขนาดรูปภาพให้เหมาะสมกับขนาดหน้าจอ หรือการโหลดรูปภาพให้ตรงกับความเร็วเน็ตเวิร์คของผู้ใช้งาน</span></li>
</ol>
<p><span style="font-family: tahoma, arial, helvetica, sans-serif; font-size: 12pt;">การใช้งาน Responsive Images ในเว็บไซต์ จะช่วยให้เราปรับแต่งการแสดงผลรูปภาพให้เหมาะสมกับอุปกรณ์ที่ผู้ใช้งานใช้งาน โดยสามารถกำหนดขนาดรูปภาพและสัดส่วนในการแสดงผลให้เหมาะสมกับขนาดหน้าจอของผู้ใช้งาน หรือใช้งานรูปภาพตามความเหมาะสมของอุปกรณ์ โดยการใช้งาน Responsive Images นั้น เราสามารถใช้งานหลายๆ วิธีตามความเหมาะสม เช่น ใช้งาน srcset attribute ของ &lt;img&gt; tag หรือ &lt;picture&gt; tag, หรือใช้งาน CSS background-image property หรือ &lt;picture&gt; tag</span></p>
<p><span style="font-family: tahoma, arial, helvetica, sans-serif; font-size: 12pt;">ตัวอย่างเช่น</span></p>
<div class="bg-black rounded-md mb-4">
<div class="flex items-center relative text-gray-200 bg-gray-800 px-4 py-2 text-xs font-sans justify-between rounded-t-md"></div>
<div class="p-4 overflow-y-auto"><span style="font-family: tahoma, arial, helvetica, sans-serif; font-size: 12pt;"><code class="!whitespace-pre hljs language-php-template"><span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"image.jpg"</span>
<span class="hljs-attr">srcset</span>=<span class="hljs-string">"image-large.jpg 1200w,
image-medium.jpg 768w,
image-small.jpg 480w"</span>
<span class="hljs-attr">sizes</span>=<span class="hljs-string">"(min-width: 1200px) 1000px,
(min-width: 768px) 720px,
100vw"</span>
<span class="hljs-attr">alt</span>=<span class="hljs-string">"An example of a responsive image"</span>&gt;</span>
</span></code></span></div>
</div>
<p><span style="font-family: tahoma, arial, helvetica, sans-serif; font-size: 12pt;">ในตัวอย่างข้างต้น เรากำหนดใช้งาน srcset attribute ของ &lt;img&gt; tag โดยระบุรูปภาพสำหรับขนาดหน้าจอต่างๆ โดยใช้ค่าความกว้างของรูปภาพ (width) ในการเลือกการแสดงผลรูปภาพ และกำหนด sizes attribute เพื่อระบุขนาดของรูปภาพที่ต้องการแสดงในขนาด</span></p>
</div>
</div>
</div>
<div class="flex justify-between lg:block"></div>
</div>
</div>
</div>
<div class="group w-full text-gray-800 dark:text-gray-100 border-b border-black/10 dark:border-gray-900/50 bg-gray-50 dark:bg-[#444654]">
<div class="text-base gap-4 md:gap-6 md:max-w-2xl lg:max-w-xl xl:max-w-3xl p-4 md:py-6 flex lg:px-0 m-auto">
<div class="w-[30px] flex flex-col relative items-end">
<div class="text-xs flex items-center justify-center gap-1 invisible absolute left-0 top-2 -ml-4 -translate-x-full group-hover:visible !invisible"></div>
</div>
<div class="relative flex w-[calc(100%-50px)] flex-col gap-1 md:gap-3 lg:w-[calc(100%-115px)]">
<div class="flex flex-grow flex-col gap-3">
<div class="min-h-[20px] flex flex-col items-start gap-4 whitespace-pre-wrap">
<div class="markdown prose w-full break-words dark:prose-invert light">
<p><span style="font-family: tahoma, arial, helvetica, sans-serif; font-size: 12pt;">นอกจากนี้เรายังสามารถใช้งาน &lt;picture&gt; tag ในการแสดงผลรูปภาพแบบ responsive โดยการกำหนด source element สำหรับรูปภาพที่ต้องการแสดงในขนาดหน้าจอต่างๆ ดังตัวอย่างนี้</span></p>
<div class="bg-black rounded-md mb-4">
<div class="flex items-center relative text-gray-200 bg-gray-800 px-4 py-2 text-xs font-sans justify-between rounded-t-md"></div>
<div class="p-4 overflow-y-auto"><span style="font-family: tahoma, arial, helvetica, sans-serif; font-size: 12pt;"><code class="!whitespace-pre hljs language-php-template"><span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">picture</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">source</span> <span class="hljs-attr">media</span>=<span class="hljs-string">"(min-width: 1200px)"</span> <span class="hljs-attr">srcset</span>=<span class="hljs-string">"large.jpg"</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">source</span> <span class="hljs-attr">media</span>=<span class="hljs-string">"(min-width: 768px)"</span> <span class="hljs-attr">srcset</span>=<span class="hljs-string">"medium.jpg"</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">source</span> <span class="hljs-attr">media</span>=<span class="hljs-string">"(min-width: 480px)"</span> <span class="hljs-attr">srcset</span>=<span class="hljs-string">"small.jpg"</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"fallback.jpg"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"An example of a responsive image"</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">picture</span>&gt;</span>
</span></code></span></div>
</div>
<p><span style="font-family: tahoma, arial, helvetica, sans-serif; font-size: 12pt;">ในตัวอย่างข้างต้น เราใช้งาน &lt;picture&gt; tag เพื่อแสดงรูปภาพแบบ responsive โดยกำหนด source element สำหรับแต่ละขนาดหน้าจอ และกำหนดรูปภาพ fallback ด้วย &lt;img&gt; tag สำหรับกรณีที่ไม่สามารถแสดงผลรูปภาพในขนาดที่เราต้องการได้</span></p>
<p><span style="font-family: tahoma, arial, helvetica, sans-serif; font-size: 12pt;">สำหรับ responsive images สามารถใช้งานได้กับหลายๆ รูปแบบของไฟล์รูปภาพ เช่น JPEG, PNG, GIF, SVG และ WebP ซึ่ง WebP เป็นรูปแบบไฟล์รูปภาพที่พัฒนาโดย Google และมีขนาดไฟล์เล็กกว่ารูปแบบอื่นๆ แต่ยังรองรับคุณภาพภาพที่สูงกว่า</span></p>
</div>
</div>
</div>
<div class="flex justify-between lg:block"></div>
</div>
</div>
</div>
<div class="group w-full text-gray-800 dark:text-gray-100 border-b border-black/10 dark:border-gray-900/50 bg-gray-50 dark:bg-[#444654]">
<div class="text-base gap-4 md:gap-6 md:max-w-2xl lg:max-w-xl xl:max-w-3xl p-4 md:py-6 flex lg:px-0 m-auto">
<div class="w-[30px] flex flex-col relative items-end">
<div class="text-xs flex items-center justify-center gap-1 invisible absolute left-0 top-2 -ml-4 -translate-x-full group-hover:visible !invisible"></div>
</div>
<div class="relative flex w-[calc(100%-50px)] flex-col gap-1 md:gap-3 lg:w-[calc(100%-115px)]">
<div class="flex flex-grow flex-col gap-3">
<div class="min-h-[20px] flex flex-col items-start gap-4 whitespace-pre-wrap">
<div class="markdown prose w-full break-words dark:prose-invert light">
<p><span style="font-family: tahoma, arial, helvetica, sans-serif; font-size: 12pt;">การใช้งาน Responsive Images ยังสามารถใช้งานร่วมกับ CSS background-image property แบบง่าย ๆ ด้วยการกำหนด background-size property และ background-image property เช่น</span></p>
<div class="bg-black rounded-md mb-4">
<div class="flex items-center relative text-gray-200 bg-gray-800 px-4 py-2 text-xs font-sans justify-between rounded-t-md"></div>
<div class="p-4 overflow-y-auto"><span style="font-family: tahoma, arial, helvetica, sans-serif; font-size: 12pt;"><code class="!whitespace-pre hljs language-php-template"><span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"responsive-image"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</span><span class="css">
<span class="hljs-selector-class">.responsive-image</span> {
<span class="hljs-attribute">background-image</span>: <span class="hljs-built_in">url</span>(<span class="hljs-string">'image.jpg'</span>);
<span class="hljs-attribute">background-size</span>: cover;
<span class="hljs-attribute">background-repeat</span>: no-repeat;
}

<span class="hljs-keyword">@media</span> screen <span class="hljs-keyword">and</span> (<span class="hljs-attribute">max-width</span>: <span class="hljs-number">480px</span>) {
<span class="hljs-selector-class">.responsive-image</span> {
<span class="hljs-attribute">background-image</span>: <span class="hljs-built_in">url</span>(<span class="hljs-string">'image-small.jpg'</span>);
}
}

<span class="hljs-keyword">@media</span> screen <span class="hljs-keyword">and</span> (<span class="hljs-attribute">min-width</span>: <span class="hljs-number">481px</span>) <span class="hljs-keyword">and</span> (<span class="hljs-attribute">max-width</span>: <span class="hljs-number">1023px</span>) {
<span class="hljs-selector-class">.responsive-image</span> {
<span class="hljs-attribute">background-image</span>: <span class="hljs-built_in">url</span>(<span class="hljs-string">'image-medium.jpg'</span>);
}
}

<span class="hljs-keyword">@media</span> screen <span class="hljs-keyword">and</span> (<span class="hljs-attribute">min-width</span>: <span class="hljs-number">1024px</span>) {
<span class="hljs-selector-class">.responsive-image</span> {
<span class="hljs-attribute">background-image</span>: <span class="hljs-built_in">url</span>(<span class="hljs-string">'image-large.jpg'</span>);
}
}
</span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span>
</span></code></span></div>
</div>
<p><span style="font-family: tahoma, arial, helvetica, sans-serif; font-size: 12pt;">ในตัวอย่างข้างต้น เราใช้งาน CSS background-image property และ background-size property สำหรับแสดงผลรูปภาพ โดยกำหนดค่าของ background-image property เพื่อแสดงรูปภาพ และกำหนดค่าของ background-size property เพื่อปรับขนาดของรูปภาพให้เหมาะสมกับขนาดขององค์ประกอบ</span></p>
<p><span style="font-family: tahoma, arial, helvetica, sans-serif; font-size: 12pt;">โดยที่เราใช้ @media queries ในการกำหนดขนาดรูปภาพสำหรับขนาดหน้าจอต่างๆ โดยใช้ขนาดของหน้าจอเป็นเกณฑ์ในการเลือกแสดงรูปภาพที่เหมาะสมกับขนาดหน้าจอนั้นๆ ดังนั้นเมื่อเราสร้างเว็บไซต์ด้วย Responsive Images แล้ว เว็บไซต์จะแสดงผลรูปภาพที่เหมาะสมกับอุปกรณ์ที่ผู้ใช้งานใช้งาน อีกทั้งยังช่วยลดภาระการโหลดข้อมูลในเว็บไซต์ด้วย</span></p>
</div>
</div>
</div>
<div class="flex justify-between lg:block"></div>
</div>
</div>
</div>
<div class="group w-full text-gray-800 dark:text-gray-100 border-b border-black/10 dark:border-gray-900/50 bg-gray-50 dark:bg-[#444654]">
<div class="text-base gap-4 md:gap-6 md:max-w-2xl lg:max-w-xl xl:max-w-3xl p-4 md:py-6 flex lg:px-0 m-auto">
<div class="w-[30px] flex flex-col relative items-end">
<div class="text-xs flex items-center justify-center gap-1 invisible absolute left-0 top-2 -ml-4 -translate-x-full group-hover:visible !invisible"></div>
</div>
<div class="relative flex w-[calc(100%-50px)] flex-col gap-1 md:gap-3 lg:w-[calc(100%-115px)]">
<div class="flex flex-grow flex-col gap-3">
<div class="min-h-[20px] flex flex-col items-start gap-4 whitespace-pre-wrap">
<div class="markdown prose w-full break-words dark:prose-invert light">
<p><span style="font-family: tahoma, arial, helvetica, sans-serif; font-size: 12pt;">นอกจากนี้ Responsive Images ยังสามารถใช้งานร่วมกับ JavaScript libraries อื่นๆ เช่น Lazy Loading หรือ Intersection Observer เพื่อช่วยลดการโหลดข้อมูลในเว็บไซต์และเพิ่มประสิทธิภาพการโหลดหน้าเว็บไซต์ โดยลดการโหลดรูปภาพที่ไม่จำเป็นในการแสดงผลในขณะที่ผู้ใช้งานเลื่อนหน้าเว็บไปยังส่วนที่ไม่ต้องการใช้งานรูปภาพนั้น</span></p>
<p><span style="font-family: tahoma, arial, helvetica, sans-serif; font-size: 12pt;">ยังมี JavaScript libraries อื่นๆ ที่ช่วยในการแสดงผลรูปภาพแบบ responsive เช่น Picturefill, Adaptive Images, และ Responsive Img ซึ่งสามารถใช้งานได้ง่ายๆ โดยการอิมพลีเมนต์เป็น JavaScript file และใช้งานฟังก์ชันที่ต้องการตามความต้องการของโปรเจคแต่ละอย่าง</span></p>
</div>
</div>
</div>
</div>
</div>
</div>
Content Short
Content View3955
Content Thumb Highlight
Content Thumb/uploads/article/f80LzhHwVA.png
Content Img Altการใช้ media queries สำหรับ responsive
Content Tagการใช้ media queries สำหรับ responsive
Content Date(not set)
Active Status1
Sort99999
Meta Titleการใช้ media queries สำหรับ responsive
Meta Descการใช้ media queries สำหรับ responsive
Meta Keywordการใช้ media queries สำหรับ responsive
Og Titleการใช้ media queries สำหรับ responsive
Og Descการใช้ media queries สำหรับ responsive
Status1
Create Date Time2023-04-02 12:24:22
Update Date Time2023-04-04 09:32:07
Create By
Update By