กวดวิชาCSS

CSS HOME บทนำ CSS ไวยากรณ์ CSS ตัวเลือก CSS CSS วิธีการ ความคิดเห็น CSS CSS สี พื้นหลัง CSS CSS Borders CSS Margins CSS Padding CSS ความสูง/ความกว้าง โมเดลกล่อง CSS CSS Outline CSS Text แบบอักษร CSS ไอคอน 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 CSS Shadows เอฟเฟกต์ข้อความ CSS CSS Web Fonts การแปลง CSS 2D การแปลง CSS 3D การเปลี่ยน CSS ภาพเคลื่อนไหว CSS CSS Tooltips CSS สไตล์รูปภาพ ภาพสะท้อน CSS CSS วัตถุพอดี CSS วัตถุตำแหน่ง CSS Masking ปุ่ม CSS CSS Pagination CSS หลายคอลัมน์ ส่วนต่อประสานผู้ใช้ CSS ตัวแปร CSS ขนาดกล่อง CSS CSS Media Queries ตัวอย่าง CSS MQ CSS Flexbox

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

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


แบบสอบถามสื่อคืออะไร?

แบบสอบถามสื่อเป็นเทคนิค CSS ที่นำมาใช้ใน CSS3

ใช้@mediaกฎเพื่อรวมบล็อกของคุณสมบัติ CSS เฉพาะเมื่อเงื่อนไขบางอย่างเป็นจริง

ตัวอย่าง

หากหน้าต่างเบราว์เซอร์มีขนาด 600px หรือเล็กกว่านั้น สีพื้นหลังจะเป็นสีฟ้าอ่อน:

@media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

เพิ่มเบรกพอยต์

ก่อนหน้านี้ในบทช่วยสอนนี้ เราได้สร้างหน้าเว็บที่มีแถวและคอลัมน์ และมันก็ตอบสนองได้ แต่กลับดูไม่ดีในหน้าจอขนาดเล็ก

แบบสอบถามสื่อสามารถช่วยได้ เราสามารถเพิ่มเบรกพอยต์ซึ่งบางส่วนของการออกแบบจะทำงานแตกต่างกันในแต่ละด้านของเบรกพอยต์


เดสก์ทอป

โทรศัพท์

ใช้แบบสอบถามสื่อเพื่อเพิ่มเบรกพอยต์ที่ 768px:

ตัวอย่าง

เมื่อหน้าจอ (หน้าต่างเบราว์เซอร์) มีขนาดเล็กกว่า 768px แต่ละคอลัมน์ควรมีความกว้าง 100%:

/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

@media only screen and (max-width: 768px) {
  /* For mobile phones: */
  [class*="col-"] {
    width: 100%;
  }
}


ออกแบบสำหรับมือถือก่อนเสมอ

Mobile First หมายถึง การออกแบบสำหรับมือถือก่อนที่จะออกแบบสำหรับเดสก์ท็อปหรืออุปกรณ์อื่นๆ (ซึ่งจะทำให้หน้าแสดงเร็วขึ้นบนอุปกรณ์ขนาดเล็ก)

ซึ่งหมายความว่าเราต้องทำการเปลี่ยนแปลงบางอย่างใน CSS ของเรา

แทนที่จะเปลี่ยนรูปแบบเมื่อความกว้างมีขนาดเล็กกว่า 768px เราควรเปลี่ยนการออกแบบเมื่อความกว้างมีขนาดใหญ่กว่า 768px สิ่งนี้จะทำให้การออกแบบของเราเป็นมือถืออันดับแรก:

ตัวอย่าง

/* For mobile phones: */
[class*="col-"] {
  width: 100%;
}

@media only screen and (min-width: 768px) {
  /* For desktop: */
  .col-1 {width: 8.33%;}
  .col-2 {width: 16.66%;}
  .col-3 {width: 25%;}
  .col-4 {width: 33.33%;}
  .col-5 {width: 41.66%;}
  .col-6 {width: 50%;}
  .col-7 {width: 58.33%;}
  .col-8 {width: 66.66%;}
  .col-9 {width: 75%;}
  .col-10 {width: 83.33%;}
  .col-11 {width: 91.66%;}
  .col-12 {width: 100%;}
}

เบรกพอยต์อีกแห่ง

คุณสามารถเพิ่มเบรกพอยต์ได้มากเท่าที่คุณต้องการ

เราจะแทรกจุดพักระหว่างแท็บเล็ตและโทรศัพท์มือถือด้วย


เดสก์ทอป

ยาเม็ด

โทรศัพท์

เราทำได้โดยเพิ่มการสืบค้นสื่ออีกหนึ่งรายการ (ที่ 600px) และชุดคลาสใหม่สำหรับอุปกรณ์ที่มีขนาดใหญ่กว่า 600px (แต่เล็กกว่า 768px):

ตัวอย่าง

โปรดทราบว่าคลาสทั้งสองชุดเกือบจะเหมือนกัน ความแตกต่างเพียงอย่างเดียวคือชื่อ ( col-และcol-s-):

/* For mobile phones: */
[class*="col-"] {
  width: 100%;
}

@media only screen and (min-width: 600px) {
  /* For tablets: */
  .col-s-1 {width: 8.33%;}
  .col-s-2 {width: 16.66%;}
  .col-s-3 {width: 25%;}
  .col-s-4 {width: 33.33%;}
  .col-s-5 {width: 41.66%;}
  .col-s-6 {width: 50%;}
  .col-s-7 {width: 58.33%;}
  .col-s-8 {width: 66.66%;}
  .col-s-9 {width: 75%;}
  .col-s-10 {width: 83.33%;}
  .col-s-11 {width: 91.66%;}
  .col-s-12 {width: 100%;}
}

@media only screen and (min-width: 768px) {
  /* For desktop: */
  .col-1 {width: 8.33%;}
  .col-2 {width: 16.66%;}
  .col-3 {width: 25%;}
  .col-4 {width: 33.33%;}
  .col-5 {width: 41.66%;}
  .col-6 {width: 50%;}
  .col-7 {width: 58.33%;}
  .col-8 {width: 66.66%;}
  .col-9 {width: 75%;}
  .col-10 {width: 83.33%;}
  .col-11 {width: 91.66%;}
  .col-12 {width: 100%;}
}

อาจดูแปลกที่เรามีสองชุดของคลาสที่เหมือนกัน แต่มันทำให้เรามีโอกาสใน HTMLเพื่อตัดสินใจว่าจะเกิดอะไรขึ้นกับคอลัมน์ที่จุดพักแต่ละจุด:

ตัวอย่าง HTML

สำหรับเดสก์ท็อป:

ส่วนแรกและส่วนที่สามจะครอบคลุมแต่ละคอลัมน์ 3 คอลัมน์ ส่วนตรงกลางจะครอบคลุม 6 คอลัมน์

สำหรับแท็บเล็ต:

ส่วนแรกจะขยาย 3 คอลัมน์ ส่วนที่สองจะขยาย 9 และส่วนที่สามจะแสดงด้านล่างของสองส่วนแรก และจะขยาย 12 คอลัมน์:

<div class="row">
  <div class="col-3 col-s-3">...</div>
  <div class="col-6 col-s-9">...</div>
  <div class="col-3 col-s-12">...</div>
</div>

เบรกพอยต์อุปกรณ์ทั่วไป

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

ตัวอย่าง

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {...}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {...}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {...}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {...}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {...}

การวางแนว: แนวตั้ง / แนวนอน

แบบสอบถามสื่อยังสามารถใช้เพื่อเปลี่ยนเค้าโครงของหน้าขึ้นอยู่กับการวางแนวของเบราว์เซอร์

คุณสามารถมีชุดคุณสมบัติ CSS ที่จะใช้งานได้เมื่อหน้าต่างเบราว์เซอร์กว้างกว่าความสูงเท่านั้น ซึ่งเรียกว่า "แนวนอน"

ตัวอย่าง

หน้าเว็บจะมีพื้นหลังสีฟ้าอ่อนหากการวางแนวอยู่ในโหมดแนวนอน:

@media only screen and (orientation: landscape) {
  body {
    background-color: lightblue;
  }
}

ซ่อนองค์ประกอบด้วยการสืบค้นสื่อ

การใช้งานทั่วไปของคิวรี่สื่อคือการซ่อนองค์ประกอบบนหน้าจอขนาดต่างๆ:

ฉันจะถูกซ่อนไว้บนหน้าจอขนาดเล็ก

ตัวอย่าง

/* If the screen size is 600px wide or less, hide the element */
@media only screen and (max-width: 600px) {
  div.example {
    display: none;
  }
}

เปลี่ยนขนาดตัวอักษรด้วย Media Queries

คุณยังสามารถใช้การสืบค้นสื่อเพื่อเปลี่ยนขนาดฟอนต์ขององค์ประกอบในขนาดหน้าจอต่างๆ ได้:

ขนาดตัวอักษรตัวแปร

ตัวอย่าง

/* If the screen size is 601px or more, set the font-size of <div> to 80px */
@media only screen and (min-width: 601px) {
  div.example {
    font-size: 80px;
  }
}

/* If the screen size is 600px or less, set the font-size of <div> to 30px */
@media only screen and (max-width: 600px) {
  div.example {
    font-size: 30px;
  }
}

CSS @media อ้างอิง

สำหรับภาพรวมของสื่อทุกประเภทและคุณลักษณะ/นิพจน์ โปรดดูที่ กฎ @media ในข้อมูลอ้างอิง CSS ของเรา