我是 HTML/CSS/前端网页设计的新手，我刚刚开始使用媒体查询来使网站更加流畅和移动/平板电脑友好。
对某些设备使用特定的断点是否更好？例如 iPhone 6 的 375px 查询和 iPad 的 1024px 查询等等。
或者，是否更好地按照我在宽屏桌面上设计网站样式然后在我的浏览器中缩小宽度直到样式困惑，并使用那个点作为断点来完成我的工作？媒体查询来整理该宽度的样式，等等。
您会在我的代码示例中看到。
切入点，我是针对每个设备宽度使用特定查询，还是像我在下面所做的那样针对每个宽度缩放它？
谢谢。
/* Global Styles ------------------- */
body {
padding: 0;
margin: 0;
background: rgb(207, 207, 207);
font: 1.1em/1.5 Arial, helvetica, sans-serif;
color: rgb(71, 71, 71);
}
.container {
width: 80%;
margin:auto;
overflow: none;
}
/* Navigation Bar ----------------- */
header {
background: rgb(44, 45, 61);
box-shadow: 0 -1px 30px black;
text-shadow: 3px 3px 8px black;
border-bottom: solid rgba(0, 0, 0, 0.3) 1px;
}
nav {
float: right;
}
nav ul {
padding: 0;
margin: 0;
}
nav li {
list-style: none;
float: left;
margin-top: 35px;
}
nav a {
text-decoration: none;
padding: 10px;
color: silver;
}
nav a:hover {
color: white;
transition-duration: 0.3s;
}
#active {
color: white;
}
.logo {
float: left;
color: white;
}
/* Landing Showoff ------------ */
.landing h1,
.landing h3 {
text-align: center;
}
.landing h1 {
text-transform: uppercase;
}
.landing {
background: url('https://placeimg.com/750/500/tech') no-repeat center;
background-size: cover;
padding: 75px;
color: white;
text-shadow: 3px 3px 8px black;
box-shadow: 0 4px 10px -2px black;
}
/* Information Columns -------------- */
.info {
margin-top: 60px;
padding: 10px 10%;
list-style: none;
list-style-position: inside;
}
.info-border {
border-top: solid grey 2px;
padding-top: 30px;
}
.info h3 {
text-align: center;
}
.left {
float: left;
}
.right {
float: right;
}
/* Clearfix ------------------- */
.clearfix:after {
content: "";
display: table;
clear: both;
}
/* Media Queries ----------------- */
@media (max-width: 1345px) {
.info {
padding: 0;
font-size: 1rem;
}
.info-border {
width: 80%;
margin:auto;
overflow: none;
}
}
@media (max-width: 990px) {
.container {
width: 85%;
font-size: 1rem;
}
}
@media (max-width: 925px) {
.container {
width: 90%;
font-size: 1rem;
}
}
@media (max-width: 875px) {
.container {
width: 95%;
}
}
@media (max-width: 830px) {
.info {
width: 100%;
text-align: center;
font-size: 0.9rem;
list-style-position: inside;
}
}
@media (max-width: 825px) {
.container {
font-size: 0.9rem;
}
.info {
width: 100%;
text-align: center;
list-style-position: inside;
}
}
@media (max-width: 745px) {
.container {
font-size: 1rem;
}
.left {
float: none;
}
.right {
float: none;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<title>TITLE</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<meta name="description" content="DESCRIPTION">
<meta name="keywords" content="SEARCH, ENGINE, OPTIMIZATION">
<meta name="author" content="NAME">
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<header class="clearfix">
<div class="container">
<div class="logo">
<h1><span class="highlight">Lorem</span> Ipsum</h1>
</div>
<nav>
<ul>
<li><a id="active" href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</div>
</header>
<section class="landing">
<h1>Lorem Ipsum Dolor</h1>
<h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit</h3>
</section>
<section class="info clearfix">
<div class="info-border"></div>
<div class="container">
<div class="left">
<h3>Lorem Ipsum</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
<ul>
<li>Lorem ipsum dolor</li>
<li>Ipsum dolor lorem</li>
<li>Dolor lorem ipsum</li>
</ul>
</div>
<div class="right">
<h3>Lorem Ipsum</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
<ul>
<li>Lorem ipsum dolor</li>
<li>Ipsum dolor lorem</li>
<li>Dolor lorem ipsum</li>
</ul>
</div>
</div>
</section>
</body>
</html>最佳答案
我认为您基本上是在正确的轨道上。要具体涵盖每种设备太复杂了，尤其是当有这么多不同尺寸的不同设备时，而且它们每年都不断推出新尺寸。
也就是说，标准(仍然有点成立)是您应该考虑大约 3 种设备范围——手机、平板电脑和台式机。我建议您在构 build 计时记住这一点，这样您就不会随着事情的发展而出现一百万个不同的断点。您可以使用一个框架来查看它们使用的断点，或者继续原样，但选择几个不同的设备在 Chrome 的 device toolbar 中进行测试。 . (这最后一个选项可能比调整窗口大小提供一些信息。)
关于HTML/CSS 这种在媒体查询中使用断点的概念不正确吗？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48368793/