Question

我想创建一个像http://www.joshuasortino.com/这样的网站。通过单击此最大化按钮，侧边栏，导航部分将自动溢出。这怎么可能？任何CSS技巧或任何js需要？请让我知道你的意见。感谢

Answer 1

它被称为响应式网页设计。

它使用@media查询技巧来检测用户浏览器宽度并根据宽度更改样式。

请在此处阅读以获取更多信息： Responsive Design from Official Google Web Master Central

对于另一个示例，您可以从这里看到它： Media Queries

Answer 2

我是JavaScript和CSS

的组合

jQuery Plugin for test resize

条件CSS：

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;"/>
<link rel="stylesheet" href="/public/styles/home.css" type="text/css" media="screen"/>
<link rel="stylesheet" href="/public/styles/home-devices.css" type="text/css" media="screen and (min-device-width: 641px)"/>
<link rel="stylesheet" href="/public/styles/home-iphone.css" type="text/css" media="screen and (max-device-width: 480px)"/>

单击最大化按钮溢出

2 个答案: