84669 person learning
152542 person learning
20005 person learning
5487 person learning
7821 person learning
359900 person learning
3350 person learning
180660 person learning
48569 person learning
18603 person learning
40936 person learning
1549 person learning
1183 person learning
32909 person learning
现在手机在加上平板 屏幕尺寸成千上万(这里只是使用了夸张的修辞手法,请不要吐槽) 这样前端的响应式设计不是就得考虑如此都多屏幕尺寸吗??
欢迎选择我的课程,让我们一起见证您的进步~~
响应式设计的时候,断点的设置,应该按内容来设置断点,而不是按设备宽度设置断点,所以无需考虑成千上万的设备.
我写过一篇关于响应式设计的性能优化的文章,将其中关于断点的内容摘抄部分
普遍的响应式设计一般会要求按照主流设备的屏幕分辨率设置断点. 随着现在手机更新迭代越来越快,屏幕分辨率更是参差多态. 现在设置的断点,可能一年半载就已不适应. 所以与其让「屏幕分辨率」确定断点,不如让「内容」确定断点. 引用 Responsive Design Workflow 作者 Stephe Hay 的话来说: Start with the small screen first, then expand until it looks like shit. Time for a breakpoint! 大概意思是,从你需要适配的最小屏幕宽度开始测试,慢慢地拉伸,当你发现页面像坨屎的时候,一个新的断点就确定了. 接下来继续反复拉伸,确定新的断点,直到你所需要适配的最大屏幕宽度为止. 最后,你会发现通过 内容确定断点 使用的断点数量远比 屏幕分辨率确定断点 要少.
普遍的响应式设计一般会要求按照主流设备的屏幕分辨率设置断点. 随着现在手机更新迭代越来越快,屏幕分辨率更是参差多态.
现在设置的断点,可能一年半载就已不适应. 所以与其让「屏幕分辨率」确定断点,不如让「内容」确定断点.
引用 Responsive Design Workflow 作者 Stephe Hay 的话来说:
Start with the small screen first, then expand until it looks like shit. Time for a breakpoint!
大概意思是,从你需要适配的最小屏幕宽度开始测试,慢慢地拉伸,当你发现页面像坨屎的时候,一个新的断点就确定了.
接下来继续反复拉伸,确定新的断点,直到你所需要适配的最大屏幕宽度为止.
最后,你会发现通过 内容确定断点 使用的断点数量远比 屏幕分辨率确定断点 要少.
现在常用的也是三屏而已,PC,平板,手机。再多的屏尺寸也是基于比页面最大宽度小的情况,大于页面最大宽度可以不需要考虑。
响应式并不是为每个尺寸都提供最佳显示,而是为某个尺寸范围。
其实这个更考究组件化设计的能力,设计的时候,只要考虑好一个组件在不同尺寸下的样子和组件与组件的位置关系就完了。
组件化设计
响应式设计的时候,断点的设置,应该按内容来设置断点,而不是按设备宽度设置断点,所以无需考虑成千上万的设备.
我写过一篇关于响应式设计的性能优化的文章,将其中关于断点的内容摘抄部分
现在常用的也是三屏而已,PC,平板,手机。再多的屏尺寸也是基于比页面最大宽度小的情况,大于页面最大宽度可以不需要考虑。
响应式并不是为每个尺寸都提供最佳显示,而是为某个尺寸范围。
其实这个更考究
组件化设计
的能力,设计的时候,只要考虑好一个组件在不同尺寸下的样子和组件与组件的位置关系就完了。