Question

考虑以下网站：200minus.com

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

Answer 1

在CSS中作为媒体查询。

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

https://developer.mozilla.org/en-US/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像素时，容器将设置为750像素。

问候

Answer 3

Theres 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像素图像）。防止用户放大或限制缩放。最有用的是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那里的百分之百。

HTML / CSS / JavaScript中的哪个位置是移动格式处理？

4 个答案: