css - 响应式设计的疑问
天蓬老师
天蓬老师 2017-04-17 11:20:56
0
3
403

现在手机在加上平板
屏幕尺寸成千上万(这里只是使用了夸张的修辞手法,请不要吐槽)
这样前端的响应式设计不是就得考虑如此都多屏幕尺寸吗??

天蓬老师
天蓬老师

欢迎选择我的课程,让我们一起见证您的进步~~

reply all(3)
Ty80

响应式设计的时候,断点的设置,应该按内容来设置断点,而不是按设备宽度设置断点,所以无需考虑成千上万的设备.

我写过一篇关于响应式设计的性能优化的文章,将其中关于断点的内容摘抄部分

普遍的响应式设计一般会要求按照主流设备的屏幕分辨率设置断点. 随着现在手机更新迭代越来越快,屏幕分辨率更是参差多态.

现在设置的断点,可能一年半载就已不适应. 所以与其让「屏幕分辨率」确定断点,不如让「内容」确定断点.

引用 Responsive Design Workflow 作者 Stephe Hay 的话来说:

Start with the small screen first, then expand until it looks like
shit. Time for a breakpoint!

大概意思是,从你需要适配的最小屏幕宽度开始测试,慢慢地拉伸,当你发现页面像坨屎的时候,一个新的断点就确定了.

接下来继续反复拉伸,确定新的断点,直到你所需要适配的最大屏幕宽度为止.

最后,你会发现通过 内容确定断点 使用的断点数量远比 屏幕分辨率确定断点 要少.

小葫芦

现在常用的也是三屏而已,PC,平板,手机。再多的屏尺寸也是基于比页面最大宽度小的情况,大于页面最大宽度可以不需要考虑。

响应式并不是为每个尺寸都提供最佳显示,而是为某个尺寸范围。

大家讲道理

其实这个更考究组件化设计的能力,设计的时候,只要考虑好一个组件在不同尺寸下的样子和组件与组件的位置关系就完了。

Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!