Question

我在寻找媒体查询的同时遇到了这个问题。总是喜欢学习新东西，无法在网上任何地方找到解释这种类型的标记。这是来自Expedia的石蕊显示的响应式网页设计。

    @media only screen and (max-width: 600px) {

    *[class="FlexWidth100"]{width:100% !important; height:auto!important; line-height:normal!important;}

Answer 1

基本上

*[class="FlexWidth100"]

与

相同

.FlexWidth100

选择

Answer 2

CSS中的

*或称为通配符。这用于选择DOM中的所有元素。

基本上，您的代码将使用DOM中的类FlexWidth100定位所有元素并应用

{width:100% !important; height:auto!important; line-height:normal!important;}

当屏幕宽度小于或等于600px

时

Answer 3

它是一个css选择器，它使用类.FlexWidth100定位.html页面上的所有元素。

这是一个响应式级联样式表，基本上用简单的英语说明如下：

@media only screen and (max-width: 600px) {
Target all screen media (laptop screen, desktop screens, smartphones and tablets
 screens)
Then it says, if and only if the max width of the webpage is 600px, then apply
the following styles, such as {width:100% !important; height:auto!important; 
line-height:normal!important;}

您可以在此处添加所需的任何样式，例如：

 @media only screen and (max-width: 600px) {

*[class="FlexWidth100"]{color: green;}

该技术通常用于定位不同尺寸的屏幕;您可能不想为每种媒体类型或屏幕尺寸编写单个样式表;然后在同一样式表中编写一个样式表，为不同的媒体类型和屏幕大小指定不同的样式。因此，当我从桌面查看您的网站时，它看起来是单向的，但是当我从同一个网站看时，例如从移动设备看，它看起来是另一种方式。

希望有帮助，尝试从桌面或笔记本电脑上查看Facebook，然后在移动设备上查看它，你会发现它看起来与众不同。

最后，要查看某个网站是否正在使用自适应样式表，请从宽屏幕（如桌面）查看，然后按住浏览器的一角，慢慢地将浏览器窗口的大小调整为较小的屏幕尺寸，只有当该网站使用响应式样式表时，您才会看到不同的样式立即应用于该网页。

希望这有助于交配！

什么类型的代码开始像这样的@media only屏幕和（max-width：600px）{* [class =“NameOfClassHere”]

3 个答案: