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

请考虑以下网站：200minus.comHTML/CSS/JavaScript中移动格式处理的位置在哪里？

此网站在手机和桌面上都看起来不错。就好像您在手机上查看网站一样，一切都适当地缩小。源代码（HTML/CSS/JavaScript）在哪里处理（或通常处理）？

2014-09-26 George

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" />

他们可以是有点怪，行为是不能跨越旧的移动设备统一，他们不会在桌面上在所有的工作，但它们非常有用。您可以强制页面宽度，并逐个像素地缩放页面（例如，400像素宽屏幕上的800像素图像）。防止用户放大或限制缩放。最有用的是width=device-width"，它可以防止在手机上查看未经优化的网页时出现可怕的缩小效果。

如果你想谈论更具体的概念，我很乐意提供帮助，我的绝大多数工作都是为手机完成的。

来源

2014-09-26 15:58:46 nepeo

在CSS中作为媒体查询。

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

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries和
W3C官方文档：http://www.w3.org/TR/css3-mediaqueries/

来源

2014-09-26 15:47:45 Lee

更多http://css-tricks.com/css-media-queries/！ – loveNoHate 2014-09-26 15:50:18

修改为在W3上添加官方文档的链接。 – 2014-09-26 15:51:48

这是简单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。

问候

来源

2014-09-26 15:48:28 Bernd

在CSS中使用媒体查询，如下解释： http://css-tricks.com/css-media-queries/

例如：

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

是，我使用一个共同的brakepoint。

对于一些特定的处理，我发现我必须使用JavaScript或jQuery才能真正获得我想要的效果，但通常CSS媒体查询和一些智能和创造性地使用显示属性显示/隐藏对象将使您那里有99％的路程。

来源

2014-09-26 15:53:32 msutton

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

回答

相关问题