如何实施响应式网页设计及其最佳实践

Question

我有一个使用 像素 渲染页面的网站。但是，当我在具有不同屏幕分辨率的不同设备中查看网站时， 整个页面将无法容纳在屏幕中 ，如果我使用
百分比 ，页面内容将会 受到挤压 。

是响应式网页设计是设计网页的正确选择。如果是这样，我几乎不用担心。

1. 将现有网站转换为包含响应式设计所涉及的风险是什么？
2. 有没有可用的框架来做到这一点，哪个是最好的框架
3. 设备和浏览器如何支持它

Answer 1

使用媒体查询将针对不同的屏幕尺寸适应不同的CSS。它的工作方式是告诉浏览器：screenwidth=700px或更小/更大；使用移动CSS。如果screenwidth = 1000px或更小/更大；使用桌面CSS。您可以使用多少个媒体查询没有限制。

也可以使用百分比。流体设计。我建议同时使用它和媒体查询。

至于框架，还有很多。Bootstrap]是比较受欢迎的一种。我个人认为，最好先移动工作。但是，关于这个问题仍然有激烈的辩论。

正如皮特在前面的评论中提到的那样；平稳降级 （首先 在 桌面上）工作
将使设备下载量与桌面站点一样多，但不会利用下载的内容。对于用户而言，Wich是一个巨大的缺点。
（更大的页面加载时间，大量的服务器请求，更多地使用MB数据等。） 因此，为什么我认为渐进增强 （移动优先） 是必经之路。

使用渐进增强功能，浏览器将始终始终先下载移动CSS。极大地减少了页面加载时间。