像www.sandia.gov这样的网站是如何做到在不同尺寸的屏幕下显示不同的样式的？

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

V2EX 提问指南

这是一个创建于 4006 天前的主题，其中的信息可能已经有所发展或是发生改变。

可以在电脑上测试www.sandia.gov，放大或缩小页面，可以看到当放大或缩小到一定程度时，页面会自动变成适应于当前比例的样式，对移动设备非常友好。到底该如何做？

www

sandia

gov

3 条回复 • 1970-01-01 08:00:00 +08:00

foru17

2013-11-26 23:32:05 +08:00

@media screen and (width:320px) {

}
}
@media screen and (min-width:360px) {

}

响应式布局，用媒体查询，不同分辨率不同样式。在开头需
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0,user-scalable=no"/>

kosenpai

2013-11-27 02:39:52 +08:00

@foru17 我懂了，谢谢指教！

elvinjin8

2013-11-27 09:11:38 +08:00 via iPhone

用foundation可以支持responsive design而且还很快。