如何为所有设备制作响应式网站 [英] how to make responsive website for all devices

问题描述

我之前使用过 Zurb Foundation 和 Skeleton，所以我对两者都很熟悉，但我以前从未将现有网站转换为响应式网站.转换我的网站的最快方法是什么?使用上述框架，还是为已经提供的代码添加媒体查询?(这甚至有效吗?)

I've used Zurb Foundation and Skeleton before so I'm familiar with both but I never had to convert an existing website to a responsive website before. Whats the quickest method to convert my website? Using a framework like above, or adding Media Queries for the code already provided? (Does that even work?)

推荐答案

确定您想要支持的设备，然后添加包含以下内容的样式表:

Determine which devices you want to support and then add a stylesheet with something along these lines:

/* =Responsive Structure
----------------------------------------------- */
@media (max-width: 800px) {
       /* Smaller Resolution Desktops and Laptops */
       [...]
}
@media (max-width: 650px) {
       /* Smaller devices */
       [...]
}
@media (max-width: 450px) {
       /* Even Smaller devices */
       [...]
}
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
       /* Even Smaller devices */
       [...]
}

最容易测试它们是否按降序排列.这里有更多示例媒体查询:

It's easiest to test if they go in descending order. more example media queries here:

http://css-tricks.com/snippets/css/media-标准设备查询/

这篇关于如何为所有设备制作响应式网站的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！