这行CSS是什么意思? @media only屏幕和(最小设备宽度:320像素)和(最大设备宽度:480像素) [英] What does this line of CSS mean? @media only screen and (min-device-width: 320px) and (max-device-width: 480px)

问题描述

我在Wordpress的二十一"主题样式表中找到了以下代码行.

I found the following line of code inside Wordpress' Twenty Eleven theme stylesheet.

这是什么意思?

@media only screen and (min-device-width: 320px) and (max-device-width: 480px)

推荐答案

它称为 CSS3媒体查询 是一种技术，可以帮助您的网站适应各种屏幕尺寸，或者基本上可以适应各种屏幕尺寸，从而可以为不同的设备提供不同的样式.

It's called CSS3 Media Queries which is a technique to help your website adapt to various of screen dimensions or basically, it helps to deliver different styles to different devices.

由于您是新手，所以将您的媒体查询分为两部分:

Since you're new, let's break down your media query to two parts:

@media only screen

这意味着我们将对具有屏幕的设备应用CSS样式.关键字only在此处用于隐藏旧版浏览器中的样式表，以免查看电话样式表.

This means we will apply css styles to a device with a screen. The keyword only used here to hide style sheets from older browsers from seeing phone style sheet.

and (min-device-width: 320px) and (max-device-width: 480px)

这很明显，因为这意味着仅当设备具有屏幕尺寸且宽度尺寸的最小值为320px最大值为480px时，才应用指定的css 仅.

This is quite obvious since it means that the specified css only applied when a device has a screen's size with minimum 320px and maximum of 480px in width dimension.

这篇关于这行CSS是什么意思? @media only屏幕和(最小设备宽度:320像素)和(最大设备宽度:480像素)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！