关于通用CSS媒体查询的反馈

Question

我创建了一个模板，希望对您有所帮助，以帮助我澄清一些有关媒体查询的内容。 那里有很多稍微不同的版本，也许我可以将其缩小到我需要的范围。

基本上，我的问题是，看一下我所拥有的，我是否需要更加详细地了解目标设备？ 例如，对于iPad Standard或iPad Retina，无论是横向还是纵向，像素比例都可以。。。。。。很多在线示例可以追溯到几年前。

这是实时链接

Ctrl + Shift + M可以播放手机屏幕尺寸。

这是一个完整的独立工作版本，因为我们需要一个完整的浏览器选项卡来在测试期间进行扩展和收缩。

我已经注释了代码和输出 ，以便您可以在实时扩展和收缩浏览器窗口时向我解释。

<!DOCTYPE html>
<html>

<head>
<title>v6</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 1. BOOTSTRAP v4.0.0         CSS !-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- 2. FONT AWESOME v4.7.0      CSS !-->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous" async="" defer="">
<!-- 2.1 Google Material Icons   CSS !-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- 3. GOOGLE JQUERY JS v3.2.1  JS !-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- 4. POPPER v1.12.9           JS !-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<!-- 5. BOOTSTRAP v4.0.0         JS !-->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<style>

/* STATIC CSS */

body {
background-color: #fbf1c7;
} 

.progress-path-lg {
background-color: gainsboro;

}

.progress-step-lg {
border-bottom: 4px solid silver;
opacity: 0.5;
}

.progress-step-lg-active {
border-bottom: 4px solid dodgerblue;
opacity: 1;
}

.progress-step-lg-number {
font-size: 2.5rem;
font-weight: 400;
}

.progress-step-lg-label {
font-size: 1.25rem;
font-weight: 400;
}

#output:before {
display:block;
white-space: pre;
content: "► Color: Default \A Device: N/A \A Orientation: N/A \A Begins @ 0px \A Range: 0px > 319px";

}

/* 

Media query Screen Width Logic

*** This is the stuff I'm learning right now... ***

1. Default CSS styles above are assumed UNTIL the first media query condition is met.
2. Conditions cascade upwards triggering at their respective Pixel landmark.

*/

@media only screen 
and (min-width:320px) { 
    /* smartphones, portrait iPhone, portrait 480x320 phones (Android) */ 
    body { background-color: #fb4934; } 
    #output:before {
        display:block;
        white-space: pre;
        content: "► Color: Red \A ► Device: smartphones, portrait iPhone, \A portrait 480x320 phones (Android) \A ► Orientation: N/A \A ► Begins @ 320px \A ► Range: 320px > 479px";

    }
}



@media only screen 
and (min-width:480px) { 
    /* smartphones, Android phones, landscape iPhone */ 
    body { background-color: #b8bb26; } 
    #output:before {
        display:block;
        white-space: pre;
        content: "► Color: Green \A ► Device: smartphones, Android phones, \A landscape iPhone \A ► Orientation: N/A \A ► Begins @ 480px \A ► Range: 480px > 599px";
    }
}



@media only screen 
and (min-width:600px) { 
    /* portrait tablets, portrait iPad, e-readers (Nook/Kindle), landscape 800x480 phones (Android) */ 
    body { background-color: #fabd2f; } 
    #output:before {
        display:block;
        white-space: pre;
        content: "► Color: Yellow \A ► Device: portrait tablets, portrait iPad, e-readers (Nook/Kindle), \A landscape 800x480 phones (Android) \A ► Orientation: N/A \A ► Begins @ 600px \A ► Range: 600px > 800px";

    }
}



@media only screen 
and (min-width:801px) { 
    /* tablet, landscape iPad, lo-res laptops ands desktops */ 
    body { background-color: #83a598; } 
    #output:before {
        display:block;
        white-space: pre;
        content: "► Color: Blue \A ► Device: tablet, landscape iPad, lo-res laptops ands desktops \A ► Orientation: N/A \A ► Begins @ 801px \A ► Range: 801px > 1024px";
    }
}



@media only screen 
and (min-width:1025px) { 
    /* big landscape tablets, laptops, and desktops */ 
    body { background-color: #d3869b; } 
    #output:before {
        display:block;
        white-space: pre;
        content: "► Color: Purple \A ► Device: big landscape tablets, laptops, and desktops \A ► Orientation: N/A \A ► Begins @ 1025px \A ► Range: 1025px > 1280px";

    }
}



@media only screen 
and (min-width:1281px) { 
    /* hi-res laptops and desktops */ 
    body { background-color: #8ec07c; } 
    #output:before {
        display:block;
        white-space: pre;
        content: "► Color: Aqua \A ► Device: hi-res laptops and desktops \A ► Orientation: N/A \A ► Begins @ 1281px \A ► Range: 1281px > infinity";

    }
}

</style>
</head>

<body>
<!-- BEGIN WRAPPER !-->
<div class="py-5">
<!-- BEGIN CONTAINER !-->
<div class="container">



<!-- BEGIN PROGRESS PATH !-->
<!-- BEGIN ROW !-->
<div class="row progress-path-lg">

<!-- NEW COLUMN - SIZE 3 !-->
<div class="col-3 d-flex progress-step-lg">
<span class="progress-step-lg-number">1</span>
<span class="progress-step-lg-label px-2 pt-3">Step</span>
</div>
<!-- NEW COLUMN - SIZE 3 !-->
<div class="col-3 d-flex progress-step-lg-active">
<span class="progress-step-lg-number">2</span>
<span class="progress-step-lg-label px-2 pt-3">Step</span>
</div>
<!-- NEW COLUMN - SIZE 3 !-->
<div class="col-3 d-flex progress-step-lg">
<span class="progress-step-lg-number">3</span> 
<span class="progress-step-lg-label px-2 pt-3">Step</span>
</div>
<!-- NEW COLUMN - SIZE 3 !-->
<div class="col-3 d-flex progress-step-lg"> 
<span class="progress-step-lg-number">4</span>
<span class="progress-step-lg-label px-2 pt-3">Step</span>
</div>

</div>
<!-- END ROW !-->
<!-- END PROGRESS PATH !-->



<hr>



<!-- BEGIN ROW !-->
<div class="row">
<!-- CSS CONTENT OUTPUT CONTAINER !-->
<div class="col-12" id="output"></div>

</div>
<!-- END ROW !-->
</div>



<hr>



<!-- END CONTAINER !-->
</div>
<!-- END WRAPPER !-->
</body>

</html>

Answer 1

尝试确定设备（基于页面宽度）最终是错误的 。 原则上，您不需要它。 实际上，您可能需要，但正如您已经注意到的那样，这几乎是不可能的，因为该设备可以并且将同时用于横向和纵向模式，从而使您的工作几乎毫无用处。 此外，那里的模型太多了，当您将它们与浏览器结合使用时，您需要编写许多媒体查询。

因此，您的问题的答案是“不，您不需要更具体。如果您需要确定设备，则应该更改代码，因此不需要这些信息。” （即：找到您要使用的polyfill，以扩展浏览器支持）。

您应该坚持似乎对世界其他地方都行之有效的东西，即移动优先原则：

为所有设备 （包括最小的手机）设置页面样式
为通常在319px以上的小型手机添加特殊规则（如果有）
为普通手机添加特殊规则（如果有），通常在480px以上
为通常在767px以上的大型手机，平板电脑和小型台式机添加特殊规则（如果有）；
为通常在991px以上的大型平板电脑和小型台式机添加特殊规则（如果有）；
为普通台式机添加特殊规则，通常在1199px以上
为通常大于1499px的超大型台式机添加特殊规则

请注意，自定义768px和992px并非来自Bootstrap，尽管Bootstrap v3使用了它们。 它们是根据各种设备上屏幕的通用宽度确定的。 您应该始终注意Bootstrap或其他常用库的内容，因为它们在做出明智的决策上花费了大量精力。 因此，如果您不希望投入大量的研究时间，那么最好只信任他们。 （例如，随着设备使用情况的变化，Bootstrap v4可能会使用不同的断点，而v5可能会有其他断点，依此类推……）。

如果编码正确，则永远不必为超大型桌面编写规则，也不必指定(min-width:*px) and (max-width:*px)任何组合。 当然，在合理范围内。

从理论上讲，以上内容就足够了。 实际上，在某些特定情况下，您可能需要在某些奇怪的设备+浏览器组合上进行操作（应用补丁）。 有轻量级的JavaScript解决方案可帮助您尽快发现设备并采取适当的措施。 原理是：

加载尽可能少的CSS（折叠后的最小值）
让CSSOM快速构建，以便您可以运行js
运行JS以确定设备->采取适当的措施
加载其余的CSS异步（加载时会重建CSSOM-理想情况下不使用FOUC）
运行其余的JS（请注意，您的JS的大部分必须设置为在自定义事件上运行，该事件在加载async CSS时触发，最有可能在window.load事件之后触发）。

最后但并非最不重要的一点是，我在常规网站上通常不需要上面概述的内容。 这是一个相当高端的定制，通常很昂贵，只有大流量的大公司才考虑，对于他们来说，更快地渲染页面非常重要，因此他们愿意支付开发成本。

在另一方面，是什么让上面的技术是太昂贵，并且在上面正常的人是它需要相当大的努力分裂的CSS，但只影响初始页面加载。 随后的页面加载（缓存CSS时）在未实现上述要求的网站上的速度将与实现上述效果的网站一样快。

如果您对此主题真的很感兴趣，则可能要订阅Chrome开发者工具feed 。 您会发现许多有关网络性能的有趣话题，以及衡量它的工具。

Answer 2

第二个样本影响字体粗细和大小。

测试链接2

<!DOCTYPE html>
<html>

<head>
<title>v7</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 1. BOOTSTRAP v4.0.0         CSS !-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- 2. FONT AWESOME v4.7.0      CSS !-->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous" async="" defer="">
<!-- 2.1 Google Material Icons   CSS !-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- 3. GOOGLE JQUERY JS v3.2.1  JS !-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- 4. POPPER v1.12.9           JS !-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<!-- 5. BOOTSTRAP v4.0.0         JS !-->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<style>

/* STATIC CSS */

body {
background-color: #1d2021;
color: #a89984;
} 

.progress-path {
background-color: #282828;
min-height: 50px;
}

.progress-step {
border-bottom: 4px solid #468588;
opacity: 0.5;
}

.progress-step-active {
background-color: #32302f;
border-bottom: 4px solid #83a598;
opacity: 1;
color: #d5c4a1;
}

.progress-step-number {
padding-top: 0.25rem;
font-size: 1.5rem;
font-weight: 400;
letter-spacing: 1px;
}

.progress-step-label {
padding-top: 0.25rem;
font-size: 1rem;
font-weight: 600;
letter-spacing: 1px;
}

.card {
border: 0px;
margin-top:20px;
}

.card-header {
border-radius: 0px !important;
padding: 8px 20px;
background-color: #3c3836;
font-weight: 600;
letter-spacing: 1px;
}

.card-body {
background-color: #282828;
}

.btn {
    padding: 5px 15px;
    border-radius: 0px !important;
    border: 0 none;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.btn:focus, .btn:active:focus, .btn.active:focus {
    outline: 0 none;
}

.btn-warning {
    background: #d79921;
    color: #1d2021;
}

.btn-warning:hover, .btn-warning:focus, .btn-warning:active, .btn-warning.active, .open > .dropdown-toggle.btn-warning {
    background: #fabd2f;
    color: #1d2021;
}

#output:before {
display:block;
color: #b16286;
white-space: pre;
content: "► Device: N/A \A ► Orientation: N/A \A ► Begins @ N/A \A ► Range: Anything not explicitly declared.";

}

/* 

Media query Screen Width Logic

*** This is the stuff I'm learning right now... ***

1. Default CSS styles above are assumed UNTIL the first media query condition is met.
2. Conditions cascade upwards triggering at their respective Pixel landmark.

*/


/* **************************************************************************

Applies To:

iPhone 5/5C/5S

************************************************************************** */

/* Portrait */

@media only screen 
and (min-width:320px)
and (max-width:320px)
and (orientation : portrait) { 

/* CUSTOM STYLES */

.progress-step-number { font-size:1.5rem; }
.progress-step-label { margin: 6px 5px;  font-size:1rem; }

#output:before {
display:block;
white-space: pre;
content: "► Device: iPhone 5/5C/5S \A ► Orientation: Portrait \A ► Begins @ 320px \A ► Range: 320px > 320px";

}
}

/* Landscape */

@media only screen 
and (min-width:568px)
and (max-width:568px)
and (orientation : landscape) { 

/* CUSTOM STYLES */

.progress-step-number { font-size:1.5rem; }
.progress-step-label { margin: 6px 5px;  font-size:1rem; }

#output:before {
display:block;
white-space: pre;
content: "► Device: iPhone 5/5C/5S \A ► Orientation: Landscape \A ► Begins @ 568px \A ► Range: 568px > 568px";

}
}



/* **************************************************************************

Applies To:

iPhone 6/6S/7/8

************************************************************************** */

/* Portrait */

@media only screen 
and (min-width:375px)
and (max-width:375px)
and (orientation : portrait) { 

/* CUSTOM STYLES */

.progress-step-number { font-size:1.5rem; }
.progress-step-label { margin: 6px 5px;  font-size:1rem; }

#output:before {
display:block;
white-space: pre;
content: "► Device: iPhone 6/6S/7/8/X \A ► Orientation: Portrait \A ► Begins @ 375px \A ► Range: 375px > 375px";

}
}

/* Landscape */

@media only screen 
and (min-width:667px)
and (max-width:667px)
and (orientation : landscape) { 

/* CUSTOM STYLES */

.progress-step-number { font-size:1.5rem; }
.progress-step-label { margin: 6px 5px;  font-size:1rem; }

#output:before {
display:block;
white-space: pre;
content: "► Device: iPhone 6/6S/7/8 \A ► Orientation: Landscape \A ► Begins @ 667px \A ► Range: 667px > 667px";

}
}



/* **************************************************************************

Applies To:

iPhone X

************************************************************************** */

/* Portrait */
/* Same as iPhone 6/6S/7/8 !!! */

/* Landscape */

@media only screen 
and (min-width:812px)
and (max-width:812px)
and (orientation : landscape) { 

/* CUSTOM STYLES */

.progress-step-number { font-size:1.5rem; }
.progress-step-label { margin: 6px 5px;  font-size:1rem; }

#output:before {
display:block;
white-space: pre;
content: "► Device: iPhone X \A ► Orientation: Landscape \A ► Begins @ 812px \A ► Range: 812px > 812px";

}
}



/* **************************************************************************

Applies To:

Samsung Galaxy S7/S7 Edge

************************************************************************** */

/* Portrait */

@media only screen 
and (min-width:360px)
and (max-width:360px)
and (orientation : portrait) { 

/* CUSTOM STYLES */

.progress-step-number { font-size:1.5rem; }
.progress-step-label { margin: 6px 5px;  font-size:1rem; }

#output:before {
display:block;
white-space: pre;
content: "► Device: Samsung Galaxy S7/S7 Edge/S8/S8+ \A ► Orientation: Portrait \A ► Begins @ 360px \A ► Range: 360px > 360px";

}
}

/* Landscape */

@media only screen 
and (min-width:640px)
and (max-width:640px)
and (orientation : landscape) { 

/* CUSTOM STYLES */

.progress-step-number { font-size:1.5rem; }
.progress-step-label { margin: 6px 5px;  font-size:1rem; }

#output:before {
display:block;
white-space: pre;
content: "► Device: Samsung Galaxy S7/S7 Edge \A ► Orientation: Landscape \A ► Begins @ 640px \A ► Range: 640px > 640px";

}
}



/* **************************************************************************

Applies To:

Samsung Galaxy S8/S8+

************************************************************************** */

/* Portrait */
/* Same as Galaxy S7/S7 Edge !!! */

/* Landscape */

@media only screen 
and (min-width:740px)
and (max-width:740px)
and (orientation : landscape) { 

/* CUSTOM STYLES */

.progress-step-number { font-size:1.5rem; }
.progress-step-label { margin: 6px 5px;  font-size:1rem; }

#output:before {
display:block;
white-space: pre;
content: "► Device: Samsung Galaxy S8/S8+ \A ► Orientation: Landscape \A ► Begins @ 740px \A ► Range: 740px > 740px";

}
}



/* **************************************************************************

Applies To:

iPad Third & Fourth Generation
iPad Air 1 & 2
iPad Mini
iPad Mini 2 & 3
*Nexus 9 (by Google)

************************************************************************** */

/* Portrait */

@media only screen 
and (min-width:768px)
and (max-width:768px)
and (orientation : portrait) { 

/* CUSTOM STYLES */

.progress-step-number { font-size:1.75rem; }
.progress-step-label { margin: 7px 5px;  font-size:1.25rem; }

#output:before {
display:block;
white-space: pre;
content: "► Device: iPad Standard/Google Nexus 9 \A ► Orientation: Portrait \A ► Begins @ 768px \A ► Range: 768px > 768px";

}
}

/* Landscape */

@media only screen 
and (min-width:1024px)
and (max-width:1024px)
and (orientation : landscape) { 

/* CUSTOM STYLES */

.progress-step-number { font-size:1.75rem; }
.progress-step-label { margin: 7px 5px;  font-size:1.25rem; }

#output:before {
display:block;
white-space: pre;
content: "► Device: iPad Standard/Google Nexus 9 \A ► Orientation: Landscape \A ► Begins @ 1024px \A ► Range: 1024px > 1024px";

}
}



/* **************************************************************************

Applies To:

iPad Pro

************************************************************************** */

/* Portrait */

@media only screen 
and (min-width:1024px)
and (max-width:1024px)
and (orientation : portrait) { 

/* CUSTOM STYLES */

.progress-step-number { font-size:1.75rem; }
.progress-step-label { margin: 7px 5px;  font-size:1.25rem; }

#output:before {
display:block;
white-space: pre;
content: "► Device: iPad Pro \A ► Orientation: Portrait \A ► Begins @ 1024px \A ► Range: 1024px > 1024px";

}
}

/* Landscape */

@media only screen 
and (min-width:1366px)
and (max-width:1366px)
and (orientation : landscape) { 

/* CUSTOM STYLES */

.progress-step-number { font-size:1.75rem; }
.progress-step-label { margin: 7px 5px;  font-size:1.25rem; }

#output:before {
display:block;
white-space: pre;
content: "► Device: iPad Pro \A ► Orientation: Landscape \A ► Begins @ 1366px \A ► Range: 1366px > 1366px";

}
}




/* **************************************************************************

Applies To:

Samsung Galaxy Tab 10

************************************************************************** */

/* Portrait */

@media only screen 
and (min-width:800px)
and (max-width:800px)
and (orientation : portrait) { 

/* CUSTOM STYLES */

.progress-step-number { font-size:1.75rem; }
.progress-step-label { margin: 7px 5px;  font-size:1.25rem; }

#output:before {
display:block;
white-space: pre;
content: "► Device: Samsung Galaxy Tab 10 \A ► Orientation: Portrait \A ► Begins @ 800px \A ► Range: 800px > 800px";

}
}

/* Landscape */

@media only screen 
and (min-width:1280px)
and (max-width:1280px)
and (orientation : landscape) { 

/* CUSTOM STYLES */

.progress-step-number { font-size:1.75rem; }
.progress-step-label { margin: 7px 5px;  font-size:1.25rem; }

#output:before {
display:block;
white-space: pre;
content: "► Device: Samsung Galaxy Tab 10 \A ► Orientation: Landscape \A ► Begins @ 1280px \A ► Range: 1280px > 1280px";

}
}


</style>
</head>

<body>
<!-- BEGIN WRAPPER !-->
<div class="py-5">
<!-- BEGIN CONTAINER !-->
<div class="container">


<!-- BEGIN PROGRESS PATH !-->
<!-- BEGIN ROW !-->
<div class="row progress-path p-0" id="default">

<!-- NEW COLUMN - SIZE 3 !-->
<div class="col-3 d-flex progress-step">
<span class="progress-step-number">1</span>
<span class="progress-step-label">STEP</span>
</div>
<!-- NEW COLUMN - SIZE 3 !-->
<div class="col-3 d-flex progress-step">
<span class="progress-step-number">2</span>
<span class="progress-step-label">STEP</span>
</div>
<!-- NEW COLUMN - SIZE 3 !-->
<div class="col-3 d-flex progress-step-active">
<span class="progress-step-number">3</span> 
<span class="progress-step-label">STEP</span>
</div>
<!-- NEW COLUMN - SIZE 3 !-->
<div class="col-3 d-flex progress-step"> 
<span class="progress-step-number">4</span>
<span class="progress-step-label">STEP</span>
</div>

</div>
<!-- END ROW !-->
<!-- END PROGRESS PATH !-->







<!-- BEGIN ROW !-->
<div class="row">
<!-- NEW COLUMN - SIZE 12 !-->
<div class="col-12 p-0">





<div class="card">
<div class="card-header">
Card Header...
</div>
<div class="card-body">
<h5 class="card-title">Card Tittle...</h5>
<p class="card-text">Card Text... as a natural lead-in to additional content.</p>
<button type="button" class="btn btn-warning">Previous</button>
<button type="button" class="btn btn-warning">Next</button>
</div>
</div>








</div>

</div>
<!-- END ROW !-->





<!-- BEGIN ROW !-->
<div class="row">
<!-- NEW COLUMN - SIZE 12 !-->
<div class="col-12" id="output">

</div>

</div>
<!-- END ROW !-->




</div>
<!-- END CONTAINER !-->


<hr>


<!-- END CONTAINER !-->
</div>
<!-- END WRAPPER !-->
</body>

</html>

关于通用CSS媒体查询的反馈

问题描述

2 个解决方案

解决方案1
0 已采纳 2018-02-04 23:54:45

解决方案2
0 2018-02-05 14:42:47

关于通用CSS媒体查询的反馈

问题描述

2 个解决方案

解决方案1 0 已采纳 2018-02-04 23:54:45

解决方案2 0 2018-02-05 14:42:47

解决方案1
0 已采纳 2018-02-04 23:54:45

解决方案2
0 2018-02-05 14:42:47