📌  相关文章
📜  CSS Media Query

📅  最后修改于: 2020-11-05 09:05:38             🧑  作者: Mango

Media Query

CSS Media查询是W3C建议和CSS3模块，用于适应诸如屏幕分辨率(例如，智能手机屏幕与计算机屏幕)之类的条件。

  • 最早在CSS3中使用的媒体查询技术。
  • 它在2012年6月成为W3C推荐。
  • 它是CSS2中用于不同媒体类型(例如screen和print)的媒体相关样式表的扩展。
  • 最常用的媒体功能是“宽度”。
  • 仅当满足特定条件时，它才使用@media规则包括CSS属性块。

媒体查询的推荐媒体功能

以下是W3C建议用于媒体查询的媒体功能列表。

Feature Value Min/Max Description
color integer yes It specifies the number of bits per color component.
color-index integer yes It specifies the number of entries in the color lookup table.
device-aspect-ratio integer/integer yes It specifies the aspect ratio of the device.
device-height length yes It specifies the height of the output device.
device-width length yes It specifies the width of the output device.
grid integer no It is true for a grid-based device.
height length yes It specifies the height of the rendering surface.
monochrome integer yes It specifies the number of bits per pixel in a monochrome frame buffer.
resolution resolution (“dpi” or “dpcm”) yes It specifies the resolution of the display screen.
scan “progressive” or “interlaced” no It specifies scanning process of “tv” media types.
width length yes It specifies the width of the rendering surface.

什么是响应式网页设计?

响应式Web设计一词由Ethan Marcotte提出。它可以帮助您使用流畅的网格，灵活的图像和媒体查询来逐步增强网页，以适应不同的查看环境，例如台式机，智能手机，平板电脑等。

您在截屏时使用什么屏幕分辨率?

智能手机：320像素

平板电脑：768px

上网本：1024px

桌面：1600px

让我们以一个示例来看一下媒体查询的简单用法：

本示例指定如果将窗口的大小调整为小于500px，则背景颜色将被更改。

请参阅以下示例：









If you resize the browser window and the width of this document is less than 500 pixels, the background-color is "green", otherwise it is "yellow"

如何添加断点?

媒体查询可用于创建响应式网页。断点用于网页，您希望设计的某些部分在断点的每一侧表现不同。

让我们举个例子：

在这里，我们使用媒体查询在768px处添加断点。

请参阅以下示例：












JavaTpoint









    

  • C/C++
    • 

  • Java
    • 

  • SQL
    • 

  • Android
    • 

  • HTML
    • 

  • CSS
    • 

  • Cloud Computing
    • 

  • PHP
    • 

  • JSON
    • 

  • JQuery
    • 

  • MongoDB
    • 

  • Oracle
    • 









About JavaTpoint


JavaTpoint is written and developed that students may learn computer science related technologies easily.









What is JavaTpoint?


JavaTpoint is the No.1 Java training institute in Noida, Delhi, Gurgaon, Ghaziabad and Faridabad.
 You will get practical training on Java by our Java expert who have 7+ year industrial experience.


Why JavaTpoint?


Life Time Validity, Training by Java Professionals, Problem Solving Team, Project Development,
 Small Batches to focus on each student



How to reach?


JavaTpoint is located in Noida (Gautam Budhh Nagar). The full address is G-13 Second 
Floor Sector 3 (Near Sector-16 Metro Station)
Noida(U.P)












Resize the browser window to see how the content respond to the resizing.