内容简介:响应式开发心得
什么是响应式?页面在不同的屏幕有不同的布局,换句话说,使用相同的html在不同的分辨率有不同的排版。如下图所示:
响应式布局是为了解决适配的问题,传统的开发方式是PC端开发一套,手机端再开发一套,而使用响应式布局只要开发一套就好了。因为它是用的同样html,所以它的JS逻辑交互也只需写一套就好了,缺点是CSS比较重。
另外,传统的手机端适配常见有三种解决方案,第一种是bootstrap的columns布局;第二种是使用全局的rem,先根据屏幕换算1rem等于多少个px,然后设置html标签的font-size为多少个rem,屏幕越大,则font-size越大,然后页面所有的元素的宽高和字体大小都用rem等比例缩放;第三种是阿里的flex box,这种方案和第二种类似,不同点是页面内容的字体大小是用的px,而不是比例缩放的rem。相对来说第三种相对第二种来说应该更合理点,因为正文的字体常用的为14px或者16px,如果一个页面在这个手机字号是15.5px,在另外一个手机又变成了14.9px,这样可能会有点奇怪。第一种需要额外引入一个框架。
而使用响应式布局就不需要进行rem的换算了,下面通过上图的那个例子一步一步地分析怎么做响应式。
1. 设置不同分辨率页面两边留白
首先一个页面有最大的宽度,当屏幕超过这个宽度时这个页面最大就这么大了,不会再变大了,也就是说它固定一个最大宽度,然后居中显示,如最大为1080px。然后当大于1024px时,页面主体内容最小宽为960px,两边自动留白;在500px到1024px之间两边保持留白40px;而当小于500px时就认为是手机,两边留白20px。所以计算一下,container的代码如下:
总体的思想是留白要合适,既不能留太多,导致中间内容太窄,也不能让中间的内容显得太大。这个其实和bootstrap的container思想一致,只是你可能要根据你自己的业务特点、用户人群等做不同留白策略。
2. 屏幕变小时,一头变窄,另一头不变
当屏幕拉小时,中间内容的宽度就不能保持1080px,它得跟着变小,而在变小的过程中,往往要保持一边不变,另一边随屏幕变窄,如下图所示:
右边的计算结果宽度保持不变,缩小左边的表单栏。因为右边一旦就窄不好看了,如果右边变窄,那么字体也要相应缩小,字号一缩小,右边上下留白就变得太大了,这样就不美观了,所以只能采取右边保持不动的策略去缩小左边的内容。这种场景比较常见,如右边如果是一个头像的话,它也不能跟着缩小,它一缩小高度也要跟着缩小,导致上下太空,所以这种情况也不能动。
3. 保持中间留白固定,缩小内容宽度
左栏的宽度变小应该怎么变呢?有一个原则,就是要保持中间的间距固定,而两边的内容宽度相应缩小,如下图所示:
所以就要借助CSS3的calc,如下所示:
input{ width: calc((100% - 20px) / 2) }
calc的兼容性IE10及以上支持,android 4及以下不支持,所以考虑到不支持的设备,可以简单做个兼容,如下代码所示:
input{ width: 48%; width: calc((100% - 20px) / 2); }
如果不支持calc就用48%,这样差别其实不是很大,就是不是很精确。你可以多写几个媒体查询变得更精确。
4. 左右布局变成上下布局
当屏幕拉得很小的时候,左栏已经缩得很小了,再小就不协调了,所以这个时候要把左右布局改成上下布局,把右边的往下面放。因为右栏在大屏的时候是float: right,所以在中屏的时候覆盖掉这个浮动的属性,变成float: none就可以了,然后原本右栏的内容有四行,都比较短,可以考虑把它下面的三行排成一行,即让它们浮动。如下面代码所示:
.cal-result{ float: right; width: 330px; } @media(max-width: 800px){ .cal-result{ float: none; width: 100%; } .cal-result .result{ float: left; width: 33%; } }
让每一个result占1/3,然后浮动,效果如下:
5. 宽度太小时,自动换行
特别是当内容是列表ul形式的时候,排不下的li应当自动换到下一行。当然也可以手动控制,如下:
@media (max-width: 800px){ .result{ width: 33%; } } @media (max-width: 400px){ .result{ width: 50%; } }
在屏幕宽度小于400的时候,每个结果就占50%,这样就排成两行了。这也是一种常用的办法,但是在我们这个例子,如果数字比较小,在iPhone6 375px的屏幕上还是排得下的,如果能保持在一行相对比较美观。而且固定50%,如果当数字比较大时也有可能会有重叠的危险,这个也有办法,就是别写死宽度,而是写死min-width为50%,这样当内容比较长时,float的元素同一行排不下就会自动换行。但是最好还是要个办法让它能根据内容长度自动换行,当然可以用JS计算,但是有点麻烦。
这个时候flex就派上用场了,很简单,只要设置两个属性:
.result-container{ display: flex; justify-content: space-between; flex-wrap: wrap; }
space-between让子元素挨着容器的两边等间距排列,而wrap属性让子元素自动换行,当容器宽度不够的时候,就有了以下的效果:
还有从大屏变成成小屏的时候有些字号和间距要相应调小,这种变小是阶梯变化的,而不是像rem一样连续变化,而且这种阶梯一般只要有两个就够了,一个大屏的,一个小屏的。如果你需要做很多阶梯的话,那你的排版很可能有问题。
6. 使用响应式图片
如相同的头图,在电脑上需要使用大图,但是手机上面使用小图就好了,不然会造成加载慢浪费流量等问题,一个办法是使用backgound-image结合媒体查询,如下所示:
.banner{ background-image: url(/static/large.jpg); } @media (max-width: 500px){ background-image: url(/static/small.jpg); }
第二种常用办法是使用img的srcset或者picture标签做响应式图片,这个我在《 Effective前端7:加快页面打开速度 》已经提到,这里不再重复。
这种响应式图片除了大小屏之外,还可以兼顾视网屏即dpr为2以上的和普通屏dpr为1的屏,在高dpr的屏幕使用2倍图,而普通屏幕使用1倍图。
7. 其它问题处理
有些地方大小屏的排版差异比较大,例如有些内容大屏的时候是挨在一起,而小屏离得比较远,这个时候你可能得重复html,写两份的标签,不同屏幕隐藏掉相应的html。
还有个问题,有时候你可能要借助transform: scale做大小缩放,但这一定是下策,我们的原则还是要保持字号和间距不变,当屏幕的跨度不是很大的时候。使用transform的后果是屏幕拉小的时候,内容跟着变小了,但是由于transform不会造成重排,它占据的高度还是那么大,下面的内容不会跟上来。这样就得手动计算内容的高度。另外如果使用rem,就和响应式的思想冲突了。如果页面的一部分使用了rem,另一部分使用了px,这样就协调了,如果你全部写rem那就不用响应式开发了。
本文总结了响应式开发的一些思想,它的好处不用大屏写一套,小屏写一套,方便维护,缩短开发时间,缺点是兼容性不是特别好,并且效果没有专门出一个小屏的UI和交互来得好。但是总体来说,使用响应式还是很方便的,只要设计得好,小屏上也是挺好看的。现在响应式已经越来越流行,它可以兼容三端的屏幕,这个优点就是无法超越的,只需写一套html和一套JS逻辑。
浏览量: 5
以上所述就是小编给大家介绍的《响应式开发心得》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
软件人才管理的艺术
Michael Lopp / 罗小平 / 人民邮电出版社 / 201008 / 35.00元
本书作者具有15年的硅谷人才管理经验,他在博客上发表了大量探讨软件人才的管理之道的文章,深受读者欢迎。本书素材取自他的博客文章,用深入浅出的语言,讲述发人深思的道理,具有很强的现实操作性。 本书分为三大部分:“管理的箭袋”、“过程就是产品”、“你的其他版本”。前两部分分别讲述了人员与产品的管理,第三部分除了讨论管理之外,还讲述了如何有针对性地准备简历和电话面试,来提高自己面试成功的几率。书中......一起来看看 《软件人才管理的艺术》 这本书的介绍吧!