在HTML/CSS/JavaScript中，移动格式在哪里处理？

考虑以下网站：200minus.com

---

这个网站在手机和桌面上都很不错。这就好像当你用手机浏览网站时，一切都被适当地缩小了。在源代码（HTML/CSS/JavaScript）中，这是在哪里处理的（或者通常是在哪里处理的）？

在CSS中作为媒体查询处理

您可以调整CSS样式的布局，具体取决于正在查看的浏览器窗口的大小

• ，及
• W3C官方文档：
这很简单。试试看！我觉得真的很好。在上面的回答中也提到了CSS的所有功能。例如：

@media (min-width:768px){.container{width:750px}
}
@media (min-width:992px){.container{width:970px}
}
@media (min-width:1200px){.container{width:1170px}
}

当宽度小于992 px时，容器将设置为750px

---

问候语
在CSS中使用媒体查询，如下所述：
例如：

@media screen and max-width:600px { /* CSS here */ }

@media (min-width:650px){ 
        .about_tablet{height:175px;}
}

@media (min-width:650px) and (max-width: 675px){ /* both conditions must be met */
        .about_tablet{height:175px;}
}

@media (min-width:650px) , (max-width: 675px){ /* one or both conditions must be met */ 
        .about_tablet{height:175px;}
}

是我常用的制动点

---

对于某些特定的处理，我发现我必须使用javascript或jQuery才能真正达到我想要的效果，但一般来说，CSS媒体查询和一些智能和创造性地使用display属性显示/隐藏对象可以让你达到99%的效果。
在移动/桌面环境中有两种典型的页面设计方法
• 调整页面以适应加载时显示器的大小
  或者

• 使页面动态响应其大小（这称为响应设计）

使用响应式设计被认为是一种很好的形式，因为它在调整屏幕大小方面具有明显的优势。例如，如果平板电脑/手机被旋转，或者桌面用户调整了窗口大小
一个好的设计应该主要在css中实现，因为它是页面中更新/评估最快的部分，并且比修改页面样式更容易实现。比例布局和前瞻性规划对于制作适合多种屏幕尺寸的布局有很大帮助，许多指南将指导您先为手机设计，然后再为桌面站点进行调整。就我个人而言，我试图将它们视为一个永远不会固定大小的部分
响应式设计的主要任务是媒体查询；它们只允许您在一个或多个条件下激活某些css规则。例如：

@media screen and max-width:600px { /* CSS here */ }

@media (min-width:650px){ 
        .about_tablet{height:175px;}
}

@media (min-width:650px) and (max-width: 675px){ /* both conditions must be met */
        .about_tablet{height:175px;}
}

@media (min-width:650px) , (max-width: 675px){ /* one or both conditions must be met */ 
        .about_tablet{height:175px;}
}

另一个非常有用的技巧是视口

<meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,user-scalable=no,width=device-width" />

它们可能有点奇怪，在较旧的移动设备中行为并不一致，在台式机上根本不起作用，但它们非常有用。您可以强制页面宽度并逐像素缩放页面（例如，400px宽屏幕上的800 px图像）。阻止用户放大或限制缩放。最有用的是

width=devicewidth“

，它可以防止在手机上查看未经优化的网页时出现可怕的缩小效果

---

如果您想谈论一个更具体的概念，我很乐意提供帮助，我的大部分工作都是为手机完成的。
在W3上编辑，添加到官方文档的链接。