html – 如何实现响应式网页设计及其最佳实践

发布时间：2020-12-14 16:41:49 所属栏目：资源来源：网络整理

导读：我有一个使用像素来渲染页面的网站.但是当我在具有不同屏幕分辨率的不同设备中查看网站时,整个页面将不适合屏幕,如果我使用百分比,页面内容将被挤压. 响应式网页设计是否是设计网页的正确选择.如果是这样,我几乎没有什么顾虑. 将现有网站转换为合并响应式设

我有一个使用像素来渲染页面的网站.但是当我在具有不同屏幕分辨率的不同设备中查看网站时,整个页面将不适合屏幕,如果我使用百分比,页面内容将被挤压.

响应式网页设计是否是设计网页的正确选择.如果是这样,我几乎没有什么顾虑.

>将现有网站转换为合并响应式设计涉及的风险是什么？
>有没有可用的框架,哪个是最好的框架
>跨设备和浏览器如何支持它

使用 media queries将针对不同的屏幕尺寸调整不同的css.它的工作方式是告诉浏览器：如果screenwidth = 700px或更小/更大;使用移动css.如果screenwidth = 1000px或更小/更大;使用桌面CSS.您可以使用的媒体查询数量没有限制.

使用百分比也是可能的; fluid design.我建议将此与媒体查询一起使用.

至于框架,那里有很多. Bootstrap是更受欢迎的人群之一.我个人认为工作mobile first是最好的方式.但是,关于这个问题仍然存在激烈的争论.

正如皮特先前在评论中提到的那样;使用优雅降级(桌面优先)将使设备下载与桌面站点一样多,但不会使用下载的内容.这对用户来说是一个巨大的缺点. (更大的页面加载时间,大量的服务器请求,更多的MB数据使用等.)因此,为什么我认为渐进增强(移动优先)是要走的路.

使用渐进增强功能,浏览器将始终首先下载移动css;极为减少页面加载时间.

有关响应式设计的浏览器支持信息,请查看this link.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!