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

我创建了一个模板，希望它能对你有用，为我澄清一些关于媒体查询的事情。那里有很多略有不同的版本，也许我可以将其缩小到我需要的版本。

基本上我的问题是，看看我所拥有的，我是否需要更具体地了解目标设备？例如，和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>

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

所以你的问题的答案是"不，你不需要更具体。如果你发现自己需要确定设备，你应该改变你的代码，这样你就不需要这条信息了。(即：查找您使用的内容的 polyfill，以扩展浏览器支持)。

你应该坚持那些似乎对世界其他地方有效的方法，即移动优先原则：

为所有设备(包括最小的移动电话)设置页面样式
为小型手机添加特殊规则(如果有)，通常高于 319px
为普通手机添加特殊规则(如果有)，通常高于 480px
为大型手机、平板电脑和小型台式机添加特殊规则(如果有)，通常高于 767px;
为大型平板电脑和小型台式机添加特殊规则(如果有)，通常高于 991px;
为普通桌面添加特殊规则，通常高于 1199px
为超大桌面添加特殊规则，通常高于 1499 像素

请注意，自定义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必须设置为在自定义事件上运行，在加载asyncCSS时触发，最有可能在window.load事件之后)。

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

另一方面，使上述技术对于普通人来说过于昂贵和过度的原因是它需要相当大的努力来拆分 CSS，但它只影响初始页面加载。后续页面加载(缓存CSS时)在未实现上述内容的网站上与在实现它的网站上一样快。

如果您真的对这个主题感兴趣，你可能想订阅 Chrome 开发工具提要。你会发现很多关于网络性能的有趣讨论，以及衡量它的工具。

影响字体粗细和大小的第二个示例。

测试链接 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>

相关内容

最新更新

热门标签：