Web Front-end
CSS Tutorial
What is the difference between 'screen” and 'only screen” in media queries?
What is the difference between 'screen” and 'only screen” in media queries?
In CSS, media queries play an important role in creating a responsive web design, and nowadays responsive design is one of the important things every website requires to attract visitors.
In general, we can write media queries using the @media CSS rule. However, we can use the different conditions and keywords in a media query to target different devices. For example, mobile devices, desktop devices, printer screens, etc.
In this tutorial, we will learn the difference between the ‘screen’ and ‘only screen’ in media queries.
什么是媒体查询中的屏幕？
In CSS, we use the ‘screen’ keyword inside the media queries to target all devices with a screen, such as tablets, mobile, desktops, printers, screen readers, etc.
Syntax
Users can follow the syntax below to use the screen keyword in media queries.
@media screen and (condition) {
/* CSS code */
}
In the above syntax, a condition is used to set the breakpoints for the different devices.
Example 1
的中文翻译为：示例 1
In the example below, we have used the screen keyword with the media queries in CSS. We have a div element containing the ‘text’ class name.
On the desktop, the background color of the body is ‘aqua’, but we change it to ‘yellow’ for devices with a screen size of less than 1200 px. Also, we change the style of the div element for devices of less than 1200 px.
In the output, users can change the size of the browser’s window and observe the difference in style.
<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>
媒体查询中唯一的屏幕是什么？
在CSS中编写媒体查询时，我们还可以使用“only”关键字与“screen”关键字一起使用。当我们使用“only”关键字时，它仅在浏览器匹配媒体类型和媒体特性时应用媒体查询中的样式。
However, older browsers have the special effect of the ‘only’ keyword. For example, suppose older browsers don’t support the media queries and media features. In that case, they shouldn’t apply the styles defined inside the media query block when the device doesn’t match the media type specifications.
However, all modern browsers ignore the ‘only’ keyword.
Syntax
Users can follow the syntax below to use the ‘only’ keyword in media queries.
@media only screen and (condition) {
/* CSS code */
}
Example 2
In the example below, we have defined the ‘multiple’ div element, which contains five ‘single’ div elements. We have styled the ‘multiple’ and ‘single’ div elements.
Also, we have used media queries to style the webpage for devices with a width of less than 680 pixels. Users can change the size of the browser’s window and observe the difference in the design of the single and multiple div elements.
<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>
Difference Between the Screen and Only Screen in Media Queries?
Here, we have explained the difference between the screen and only screen in media queries in the difference table.
| Property | 的中文翻译为：属性 | “screen” 媒体类型 | “only screen” 媒体类型 |
| Syntax | 的中文翻译为：语法 | @media screen { /* CSS code */ } | @media only screen { /* CSS代码 */ } |
| 目标 | 它面向所有设备，如智能手机、台式机、平板电脑等。 | It also targets all devices except those that don’t support the media types and features like scanners or printers. |
Users learned the difference between the ‘screen’ and ‘only screen’ media types. The ‘only’ keyword has no impact in modern browsers as it always ignores the ‘only’ keyword, but it is useful for the older browsers' versions.
The above is the detailed content of What is the difference between 'screen” and 'only screen” in media queries?. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
Demystifying Screen Readers: Accessible Forms & Best Practices
Mar 08, 2025 am 09:45 AM
This is the 3rd post in a small series we did on form accessibility. If you missed the second post, check out "Managing User Focus with :focus-visible". In
Create a JavaScript Contact Form With the Smart Forms Framework
Mar 07, 2025 am 11:33 AM
This tutorial demonstrates creating professional-looking JavaScript forms using the Smart Forms framework (note: no longer available). While the framework itself is unavailable, the principles and techniques remain relevant for other form builders.
Adding Box Shadows to WordPress Blocks and Elements
Mar 09, 2025 pm 12:53 PM
The CSS box-shadow and outline properties gained theme.json support in WordPress 6.1. Let's look at a few examples of how it works in real themes, and what options we have to apply these styles to WordPress blocks and elements.
Create an Inline Text Editor With the contentEditable Attribute
Mar 02, 2025 am 09:03 AM
Building an inline text editor isn't trivial. The process starts by making the target element editable, handling potential SyntaxError exceptions along the way. Creating Your Editor To build this editor, you'll need to dynamically modify the content
Making Your First Custom Svelte Transition
Mar 15, 2025 am 11:08 AM
The Svelte transition API provides a way to animate components when they enter or leave the document, including custom Svelte transitions.
Working With GraphQL Caching
Mar 19, 2025 am 09:36 AM
If you’ve recently started working with GraphQL, or reviewed its pros and cons, you’ve no doubt heard things like “GraphQL doesn’t support caching” or
File Upload With Multer in Node.js and Express
Mar 02, 2025 am 09:15 AM
This tutorial guides you through building a file upload system using Node.js, Express, and Multer. We'll cover single and multiple file uploads, and even demonstrate storing images in a MongoDB database for later retrieval. First, set up your projec
Comparing the 5 Best PHP Form Builders (And 3 Free Scripts)
Mar 04, 2025 am 10:22 AM
This article explores the top PHP form builder scripts available on Envato Market, comparing their features, flexibility, and design. Before diving into specific options, let's understand what a PHP form builder is and why you'd use one. A PHP form
