一尘不染

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

css

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

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

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

阅读 279

收藏
2020-05-16

共1个答案

一尘不染

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

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

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

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

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

2020-05-16