移动格式在HTML / CSS / JavaScript中的何处处理？

Question

请考虑以下网站：200minus.com

这个网站在手机和台式机上看起来都不错。 就像当您在手机上查看网站时一样，一切都被缩小了。 这在源代码（HTML / CSS / JavaScript）中的何处处理（或通常在何处处理）？

Answer 1

在CSS中作为媒体查询。

您可以调整CSS样式的布局，具体取决于所使用的浏览器窗口的大小。

• https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Media_queries ，以及
• W3C官方文档： http : //www.w3.org/TR/css3-mediaqueries/

Answer 2

这是简单的Bootstrap 。 试试看！ 我认为这真的很好。 上面的答案中还提到了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。

问候

Answer 3

在移动/桌面情况下，有2种典型的页面设计方法。

• 调整页面以适合加载时显示器的尺寸。

  要么...

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

它被认为是使用响应式设计的好形式，因为它对于调整屏幕大小具有明显的优势。 例如平板电脑/手机旋转了，或者桌面用户调整了窗口大小。

一个好的设计应该主要在css中实现，因为它是页面更新/评估最快的部分，并且比修改页面样式（比JS）更容易实现。 比例布局和前瞻性计划在制作适用于多种屏幕尺寸的布局时会大有帮助，许多指南会指导您先为手机设计，然后针对桌面网站进行调整。 我个人认为它们是永远不会固定大小的一部分。

响应式设计的主要内容是媒体查询。 它们仅允许您在一个或多个条件下激活某些CSS规则。 例如：

@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=device-width" ，它可以防止您在手机上查看未优化的网页时出现可怕的缩小效果。

如果您想谈一个更具体的概念，我很乐意为您提供帮助，我的大部分工作都是针对移动设备完成的。

Answer 4

在CSS中使用媒体查询，如此处所述： http : //css-tricks.com/css-media-queries/

例如：

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

是我常用的刹车点。

对于某些特定的处理，我发现必须使用javascript或jQuery才能真正获得所需的效果，但是通常CSS媒体查询以及对具有display属性的显示/隐藏对象的一些巧妙和创造性的使用将使您获得99％的那里。