【发布时间】：2018-07-14 18:48:09
【问题描述】：
我创建了一个模板，希望能对你有所帮助，帮助我澄清有关媒体查询的一些事情。那里有很多略有不同的版本，也许我可以将其缩小到我需要的范围内。
基本上我的问题是，看看我所拥有的，我是否需要更具体地了解目标设备？例如，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>
【问题讨论】：
标签： android css iphone ipad media-queries