NEWS

分享创造价值   合作实现共赢

响应式网站前端设计的几个重点

响应式网站的重点,大致有以下几点:
1、控制大小
习惯了电脑页面的前端开发者可能更加喜欢用pc来控制大小,但在响应式的页面中出现更多的是em和rem,用它们来控制字体大小甚至是框体大小对整体的效果非常明显,如字体设置是10px/20px/30px,不同的显示器字体会有大小的差异,如果页面特别复杂或文字很多的话,这些字体的大小设置也会带来不小的工作量,但在响应式页面中就不一样:您会发现字体会撑的很大,甚至有个别占满了手机屏幕,这对移动端用户的体验是致命的。如果把它们在不同分辨率下一一调整好可能需要写很多的css代码,但如果用em/rem,就能够把工作量大大减小,同时还能够保证字体的统一比例。

2、框架
前端框架不少都是前端类型的设计,并不建议新手前端盲目的使用框架来布局,不管框架看起来多美好。在实际的使用过程中大家可能会发现很多问题,比如类名太多太复杂、样式冲突。引入资源过多导致页面繁重、偏离设计效果等等。一些框架过度的依赖AJAX,大量的AJAX在前端看起来的确很酷,对用户的友好性也足够强,但大量的请求对服务器并不友好,可能会使服务器的实际负载大大下降。总之还是一句话,按实际需求来解决问题,框架并不是万能的。

3、Media Query 它既能够准确的识别设备也能够自己设定分辨率或者宽度

4、百分比
百分比式的布局,在关键的宽度设置下百分比能够起到出乎意料的效果:
box1{ width:100%;}
ul{ margin:0 2%;}
我并不是推崇全部使用百分比来布局,但有时候这可能会大大减少工作量,给box1宽度设置100%之后它会自动以宽度填充满整个浏览器,不管你是手机PC什么分辨率,它总是有很好的表现。这时候你给box1下面的ul设置左右2%的margin也是如此,随着浏览器窗口大小改变时ul的实际margin大小也会随着变化,这么一说大家多少也都理解了百分比布局的概念。当然有时候也不会有想象中的效果,特别是在较小的分辨率上时,原来看似不错的百分比设定会显得很怪,因为响应式多数时候只约定宽度,长度都是由文档和浏览器来决定的,这时候想要在所有的终端上都有很好的体验就需要Media Query来解决问题。

我公司开发的响应式网站页面美观时尚,视觉冲击力强,客户体验佳,期待和您的合作。联系电话:13121509100

 

 

相关文章