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

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

所以问题的答案是＆＃34;不，你不需要更具体。如果您发现自己需要确定设备，则应更改代码，以便不需要此信息。＆＃34; （即：找到您使用的填充程序，以扩展浏览器支持）。

您应该坚持使用似乎适用于世界其他地方的东西，这是 移动优先 原则：

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

请注意，自定义768px和992px不是来自Bootstrap，尽管Bootstrap v3使用它们。它们是根据各种设备上屏幕的共同宽度确定的。您应该始终关注Bootstrap或其他常用库所具有的功能，因为他们需要付出很多努力才能做出明智的决策。因此，如果您不热衷于将研究时间投入其中，那么您最好只相信它们。（例如，它可能是Bootstrap v4将使用不同的断点，因为设备使用会发生变化，而v5会有其他断点等等......）。

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

理论上，上述应该足够了。实际上，在某些特定情况下，您可能需要在某些奇怪的设备+浏览器组合上执行操作（应用补丁）。轻量级JavaScript solutions可帮助您尽快发现设备并采取适当的措施。原则是：

加载尽可能少的CSS（最小化以上）
让CSSOM快速构建，以便您可以运行js
运行JS以确定设备 - ＆gt;采取适当行动
加载CSS async的其余部分（在加载时重建CSSOM - 理想情况下没有FOUC）
运行你的其他JS（注意你的大部分JS必须设置为在自定义事件上运行，在async CSS加载时触发，很可能是在window.load事件之后。

最后，但并非最不重要的是，我在常规网站上通常不需要上面列出的内容。它是一个相当高端的定制，通常是昂贵的，只有大家伙才能考虑，流量很大，对于他们来说，将页面加快一秒是非常重要的，因此他们愿意支付开发费用

另外值得注意的是，上述技术的成分是什么？方式过于昂贵而且对于普通人而言，它需要付出相当大的努力来分割CSS，但这只会影响初始页面加载。后续页面加载（当CSS被缓存时）将在没有实现上述内容的网站上与实现它的网站一样快。

如果您真的对此主题感兴趣，可能需要订阅Chrome dev tools feed。您会发现很多关于网络性能的有趣讨论，以及衡量它的工具。

Answer 2

影响字体重量和大小的第二个样本。

Test Link 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 个答案: