資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會學
服裝設計
法學媒體查詢中“screen”和“only screen”的區別是什麼？
在CSS中，媒體查詢在建立響應式網頁設計中扮演著重要的角色，而如今響應式設計是每個網站吸引訪問者所必須具備的重要因素之一。
一般來說，我們可以使用`@media` CSS規則編寫媒體查詢。但是，我們可以在媒體查詢中使用不同的條件和關鍵字來定位不同的裝置，例如移動裝置、臺式裝置、印表機螢幕等。
在本教程中，我們將學習媒體查詢中“screen”和“only screen”的區別。
媒體查詢中的“screen”是什麼？
在CSS中，我們在媒體查詢內使用“screen”關鍵字來定位所有具有螢幕的裝置，例如平板電腦、移動裝置、桌上型電腦、印表機、螢幕閱讀器等。
語法
使用者可以按照以下語法在媒體查詢中使用screen關鍵字。
@media screen and (condition) {
/* CSS code */
}
在上述語法中，條件用於為不同的裝置設定斷點。
示例1
在下面的示例中，我們在CSS的媒體查詢中使用了screen關鍵字。我們有一個包含“text”類名的div元素。
在臺式機上，body的背景顏色為“aqua”，但對於螢幕尺寸小於1200畫素的裝置，我們將它更改為“yellow”。此外，我們還更改了小於1200畫素裝置的div元素的樣式。
在輸出中，使用者可以更改瀏覽器視窗的大小並觀察樣式的差異。
<html>
<head>
<style>
* {background-color: aqua;}
.text {
background-color: red;
width: 500px;
height: auto;
padding: 10px;
margin: 10px;
border: 3px solid green;
}
@media screen and (max-width: 1200px) {
*{background-color: yellow;}
.text {
background-color: green;
width: 50%;
border: 5px dotted red;
}
}
</style>
</head>
<body>
<h3> Using the <i> @media rule </i> in CSS to make a responsive web design </h3>
<h4> Set the screen width less than 1200 pixels to change the style </h4>
<div class = "text">
This is a test div element.
</div>
</body>
</html>
媒體查詢中的“only screen”是什麼？
在CSS中編寫媒體查詢時，我們也可以將“only”關鍵字與“screen”關鍵字一起使用。當我們使用“only”關鍵字時，只有當瀏覽器匹配媒體型別和媒體特性時，它才會應用媒體查詢中的樣式。
但是，舊版瀏覽器對“only”關鍵字有特殊效果。例如，假設舊版瀏覽器不支援媒體查詢和媒體特性。在這種情況下，當裝置不匹配媒體型別規範時，它們不應應用媒體查詢塊中定義的樣式。
然而，所有現代瀏覽器都忽略“only”關鍵字。
語法
使用者可以按照以下語法在媒體查詢中使用“only”關鍵字。
@media only screen and (condition) {
/* CSS code */
}
示例2
在下面的示例中，我們定義了“multiple”div元素，其中包含五個“single”div元素。我們已經為“multiple”和“single”div元素設定了樣式。
此外，我們還使用了媒體查詢來為寬度小於680畫素的裝置設定網頁樣式。使用者可以更改瀏覽器視窗的大小並觀察“single”和“multiple”div元素設計的差異。
<html>
<head>
<style>
.multiple {
width: 100%;
height: 90%;
background-color: blue;
border-radius: 12px;
display: flex;
flex-direction: column;
justify-content: space-around;
}
.single {
width: 90%;
height: 100px;
background-color: yellow;
margin: 10px;
float: left;
margin: 0 auto;
border-radius: 12px;
}
@media only screen and (min-width: 680px) {
.multiple {
width: 90%;
height: 80%;
background-color: aqua;
border-radius: 12px;
flex-wrap: wrap;
flex-direction: row;
justify-content: space-between;
}
.single {
width: 45%;
height: 100px;
background-color: red;
margin: 10px;
float: left;
border-radius: 12px;
}
}
</style>
</head>
<body>
<h2> Using the <i> @media rule </i> in CSS to make a responsive web design </h2>
<h3> Set the screen width less than 680 pixels to change the style </h3>
<div class = "multiple">
<div class = "single"> </div>
<div class = "single"> </div>
<div class = "single"> </div>
<div class = "single"> </div>
<div class = "single"> </div>
</div>
</body>
</html>
媒體查詢中“screen”和“only screen”的區別？
在這裡，我們在差異表中解釋了媒體查詢中“screen”和“only screen”的區別。
| 屬性 | “screen”媒體型別 | “only screen”媒體型別 |
| 語法 | @media screen { /* CSS程式碼 */ } | @media only screen { /* CSS程式碼 */ } |
| 目標 | 它定位所有裝置，例如智慧手機、桌上型電腦、平板電腦等。 | 它還定位所有裝置，但不包括不支援媒體型別和特性的裝置，例如掃描器或印表機。 |
使用者學習了“screen”和“only screen”媒體型別的區別。“only”關鍵字在現代瀏覽器中沒有影響，因為它總是忽略“only”關鍵字，但在舊版瀏覽器中它很有用。
3K+ 瀏覽量
