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

V2EX = way to explore

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

For Existing Member Sign In

This topic created in 4537 days ago, the information mentioned may be changed or developed.

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

www

sandia

gov

3 replies • 1970-01-01 08:00:00 +08:00

foru17

Nov 26, 2013

@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

Nov 27, 2013

@foru17 我懂了，谢谢指教！

elvinjin8

Nov 27, 2013 via iPhone

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