แบบสอบถามสื่อการออกแบบเว็บที่ตอบสนองต่อ
สารบัญ
สื่อแบบสอบถามคืออะไร?
คิวรีสื่อเป็นเทคนิค CSS ที่นำมาใช้ใน CSS3
ใช้กฎ @media เพื่อรวมบล็อกของคุณสมบัติ CSS เฉพาะในกรณีที่ เงื่อนไขบางประการเป็นจริง
ตัวอย่าง
หากหน้าต่างเบราว์เซอร์มีขนาด 600px หรือเล็กกว่า สีพื้นหลังจะเป็นสีฟ้าอ่อน:
@media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}ลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
background-color: lightgreen;
}
@media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
</style>
</head>
<body>
<p>Resize the browser window. When the width of this document is 600 pixels or less, the background-color is "lightblue", otherwise it is "lightgreen".</p>
</body>
</html>
เพิ่มเบรกพอยต์
ก่อนหน้านี้ในบทช่วยสอนนี้ เราได้สร้างหน้าเว็บที่มีแถวและคอลัมน์ และมันก็ตอบสนองได้ดี แต่ก็ดูไม่ดีบนหน้าจอขนาดเล็ก
ข้อความค้นหาสื่อสามารถช่วยได้ เราสามารถเพิ่มเบรกพอยต์โดยที่บางส่วนของการออกแบบจะทำงานแตกต่างกันในแต่ละด้านของเบรกพอยต์
Desktop
Phone
ใช้แบบสอบถามสื่อเพื่อเพิ่มเบรกพอยต์ที่ 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%;
}
}ลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
box-sizing: border-box;
}
.row::after {
content: "";
clear: both;
display: block;
}
[class*="col-"] {
float: left;
padding: 15px;
}
html {
font-family: "Lucida Sans", sans-serif;
}
.header {
background-color: #9933cc;
color: #ffffff;
padding: 15px;
}
.menu ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.menu li {
padding: 8px;
margin-bottom: 7px;
background-color: #33b5e5;
color: #ffffff;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.menu li:hover {
background-color: #0099cc;
}
.aside {
background-color: #33b5e5;
padding: 15px;
color: #ffffff;
text-align: center;
font-size: 14px;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.footer {
background-color: #0099cc;
color: #ffffff;
text-align: center;
font-size: 12px;
padding: 15px;
}
/* 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%;
}
}
</style>
</head>
<body>
<div class="header">
<h1>Chania</h1>
</div>
<div class="row">
<div class="col-3 menu">
<ul>
<li>The Flight</li>
<li>The City</li>
<li>The Island</li>
<li>The Food</li>
</ul>
</div>
<div class="col-6">
<h1>The City</h1>
<p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.</p>
</div>
<div class="col-3 right">
<div class="aside">
<h2>What?</h2>
<p>Chania is a city on the island of Crete.</p>
<h2>Where?</h2>
<p>Crete is a Greek island in the Mediterranean Sea.</p>
<h2>How?</h2>
<p>You can reach Chania airport from all over Europe.</p>
</div>
</div>
</div>
<div class="footer">
<p>Resize the browser window to see how the content respond to the resizing.</p>
</div>
</body>
</html>
ออกแบบสำหรับมือถือก่อนเสมอ
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%;}
}ลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
box-sizing: border-box;
}
.row::after {
content: "";
clear: both;
display: table;
}
[class*="col-"] {
float: left;
padding: 15px;
}
html {
font-family: "Lucida Sans", sans-serif;
}
.header {
background-color: #9933cc;
color: #ffffff;
padding: 15px;
}
.menu ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.menu li {
padding: 8px;
margin-bottom: 7px;
background-color: #33b5e5;
color: #ffffff;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.menu li:hover {
background-color: #0099cc;
}
.aside {
background-color: #33b5e5;
padding: 15px;
color: #ffffff;
text-align: center;
font-size: 14px;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.footer {
background-color: #0099cc;
color: #ffffff;
text-align: center;
font-size: 12px;
padding: 15px;
}
/* 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%;}
}
</style>
</head>
<body>
<div class="header">
<h1>Chania</h1>
</div>
<div class="row">
<div class="col-3 menu">
<ul>
<li>The Flight</li>
<li>The City</li>
<li>The Island</li>
<li>The Food</li>
</ul>
</div>
<div class="col-6">
<h1>The City</h1>
<p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.</p>
</div>
<div class="col-3 right">
<div class="aside">
<h2>What?</h2>
<p>Chania is a city on the island of Crete.</p>
<h2>Where?</h2>
<p>Crete is a Greek island in the Mediterranean Sea.</p>
<h2>How?</h2>
<p>You can reach Chania airport from all over Europe.</p>
</div>
</div>
</div>
<div class="footer">
<p>Resize the browser window to see how the content respond to the resizing.</p>
</div>
</body>
</html>
เบรกพอยต์อีกอัน
คุณสามารถเพิ่มเบรกพอยท์ได้มากเท่าที่คุณต้องการ
นอกจากนี้เรายังจะแทรกเบรกพอยต์ระหว่างแท็บเล็ตและโทรศัพท์มือถือด้วย
Desktop
Tablet
Phone
เราทำเช่นนี้โดยการเพิ่มคิวรีสื่ออีกหนึ่งรายการ (ที่ 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>ลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
box-sizing: border-box;
}
.row::after {
content: "";
clear: both;
display: table;
}
[class*="col-"] {
float: left;
padding: 15px;
}
html {
font-family: "Lucida Sans", sans-serif;
}
.header {
background-color: #9933cc;
color: #ffffff;
padding: 15px;
}
.menu ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.menu li {
padding: 8px;
margin-bottom: 7px;
background-color: #33b5e5;
color: #ffffff;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.menu li:hover {
background-color: #0099cc;
}
.aside {
background-color: #33b5e5;
padding: 15px;
color: #ffffff;
text-align: center;
font-size: 14px;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.footer {
background-color: #0099cc;
color: #ffffff;
text-align: center;
font-size: 12px;
padding: 15px;
}
/* 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%;}
}
</style>
</head>
<body>
<div class="header">
<h1>Chania</h1>
</div>
<div class="row">
<div class="col-3 col-s-3 menu">
<ul>
<li>The Flight</li>
<li>The City</li>
<li>The Island</li>
<li>The Food</li>
</ul>
</div>
<div class="col-6 col-s-9">
<h1>The City</h1>
<p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.</p>
</div>
<div class="col-3 col-s-12">
<div class="aside">
<h2>What?</h2>
<p>Chania is a city on the island of Crete.</p>
<h2>Where?</h2>
<p>Crete is a Greek island in the Mediterranean Sea.</p>
<h2>How?</h2>
<p>You can reach Chania airport from all over Europe.</p>
</div>
</div>
</div>
<div class="footer">
<p>Resize the browser window to see how the content respond to the resizing.</p>
</div>
</body>
</html>
เบรกพอยต์ของอุปกรณ์ทั่วไป
มีหน้าจอและอุปกรณ์จำนวนมากที่มีความสูงและความกว้างต่างกัน ดังนั้นจึงเป็นเรื่องยากที่จะสร้างเบรกพอยต์ที่แน่นอนสำหรับแต่ละอุปกรณ์ เพื่อให้สิ่งต่าง ๆ เรียบง่ายคุณสามารถกำหนดเป้าหมายได้ ห้ากลุ่ม:
ตัวอย่าง
/*
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) {...} ลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.example {
padding: 20px;
color: white;
}
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
.example {background: red;}
}
/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
.example {background: green;}
}
/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
.example {background: blue;}
}
/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
.example {background: orange;}
}
/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
.example {background: pink;}
}
</style>
</head>
<body>
<h2>Typical Media Query Breakpoints</h2>
<p class="example">Resize the browser window to see how the background color of this paragraph changes on different screen sizes.</p>
</body>
</html>
การวางแนว: แนวตั้ง/แนวนอน
ข้อความค้นหาสื่อสามารถใช้เพื่อเปลี่ยนเค้าโครงของหน้าได้ขึ้นอยู่กับ การวางแนวของเบราว์เซอร์
คุณสามารถมีชุดคุณสมบัติ CSS ที่จะทำได้เท่านั้น ใช้เมื่อหน้าต่างเบราว์เซอร์กว้างกว่าความสูง เรียกว่า "แนวนอน" ปฐมนิเทศ:
ตัวอย่าง
หน้าเว็บจะมีพื้นหลังสีฟ้าอ่อนหากการวางแนวอยู่ในโหมดแนวนอน:
@media only screen and (orientation: landscape) {
body {
background-color: lightblue;
}
}ลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
background-color: lightgreen;
}
@media only screen and (orientation: landscape) {
body {
background-color: lightblue;
}
}
</style>
</head>
<body>
<p>Resize the browser window. When the width of this document is larger than the height, the background color is "lightblue", otherwise it is "lightgreen".</p>
</body>
</html>
ซ่อนองค์ประกอบด้วยการสืบค้นสื่อ
การใช้คำสั่งสื่อทั่วไปอีกอย่างหนึ่งคือการซ่อนองค์ประกอบบนหน้าจอขนาดต่างๆ:
ตัวอย่าง
/* If the screen size is 600px wide or less, hide the element */
@media only screen and (max-width: 600px) {
div.example {
display: none;
}
}ลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div.example {
background-color: yellow;
padding: 20px;
}
@media screen and (max-width: 600px) {
div.example {
display: none;
}
}
</style>
</head>
<body>
<h2>Hide elements on different screen sizes</h2>
<div class="example">Example DIV.</div>
<p>When the browser's width is 600px wide or less, hide the div element. Resize the browser window to see the effect.</p>
</body>
</html>
เปลี่ยนขนาดตัวอักษรด้วยการสืบค้นสื่อ
คุณยังสามารถใช้คำสั่งสื่อเพื่อเปลี่ยนขนาดตัวอักษรขององค์ประกอบได้ ขนาดหน้าจอที่แตกต่างกัน:
Variable Font Size.
ตัวอย่าง
/* If the screen size is 601px or more, set the font-size of <div> to 80px */
@media only screen and (min-width: 601px) {
{
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;
}
}ลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div.example {
background-color: lightgrey;
padding: 20px;
}
@media screen and (min-width: 600px) {
div.example {
font-size: 80px;
}
}
@media screen and (max-width: 600px) {
div.example {
font-size: 30px;
}
}
</style>
</head>
<body>
<h2>Change the font size of an element on different screen sizes</h2>
<div class="example">Example DIV.</div>
<p>When the browser's width is 600px wide or less, set the font-size of DIV to 30px. When it is 601px or wider, set the font-size to 80px. Resize the browser window to see the effect.</p>
</body>
</html>
การอ้างอิง CSS @media
สำหรับภาพรวมทั้งหมดของสื่อทุกประเภทและคุณสมบัติ/การแสดงออก โปรดดูที่ กฎ @media ในการอ้างอิง CSS ของเรา