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.
* {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; } } Using the @media rule in CSS to make a responsive web design
Set the screen width less than 1200 pixels to change the style
This is a test div element.
媒体查询中唯一的屏幕是什么？
在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.
.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; } } Using the @media rule in CSS to make a responsive web design
Set the screen width less than 680 pixels to change the style
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.
以上就是What is the difference between “screen” and “only screen” in media queries?的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1625260.html
微信扫一扫 
支付宝扫一扫 
