原文标题:正能量浅谈响应式网站建设前端设计!
国内搜索引擎技术还不是很成熟,百度建议移动站和PC端分开来做,但是随着技术的发展未来也会像谷歌一样识别响应式网站建设。毕竟方便节省资源和时间成本嘛,下面正能量浅谈下关于响应式网站建设前端设计的一些经验,感谢阅读。
1、响应式布局里的框架
bootstrap来说,如果你要设计一个类似于google的搜索框就显得很难,google类型的搜索框实际上是将一个input包含在box里面,然后在这个box里面再加上左右图标,如果你用bootstrap来做可能会出现很多莫名奇妙的冲突,但实际上你得到了什么呢?一个圆角一个行高?还是他的百分比宽度呢?这些用css来写只不过是几句代码的事。
还有一些框架过度的依赖AJAX,它们也许想法很好,大量的AJAX在前端看起来的确很酷,对用户的友好性也足够强,但大量的请求对服务器并不友好,可能会使服务器的实际负载大大下降。总之还是一句话,按实际需求来解决问题,框架并不是万能的。如有响应式网站制作的需求可以联系我们。
2、使用em和rem控制大小
习惯了PC页面的前端开发者可能更加喜欢用pc来控制大小,但在响应式的页面中出现更多的是em和rem,用它们来控制字体大小甚至是框体大小对整体的效果非常明显。能够把工作量大大减小,同时还能够保证字体的统一比例。
关于em和rem的解释大家可以自行搜索,网上这类教程数不胜数,实际上它们就和px一样简单,当我开始用之后也不过只花了几分钟熟悉它们。就像前面说的一样,你也可以用它们来控制框体的大小,然后再响应式的页面下统一缩放,当然这需要足够多的计算。另外值得一提的是字体图标也可以用它们来控制。推荐阅读:定制H5响应式网站建设的几大好处
3、关于百分比缩放问题
解决缩放问题的思路有好几种,最适合新手的无疑是百分比式的布局,在关键的宽度设置下百分比能够起到出乎意料的效果:
box1{ width:100%;}
ul{ margin:0 2%;}
有时候这可能会大大减少工作量,给box1宽度设置100%之后它会自动以宽度填充满整个浏览器,不管你是手机PC什么分辨率,它总是有很好的表现。这时候你给box1下面的ul设置左右2%的margin也是如此,随着浏览器窗口大小改变时ul的实际margin大小也会随着变化。
当然有时候也不会有想象中的效果,特别是在较小的分辨率上时,原来看似不错的百分比设定会显得很怪,因为响应式多数时候只约定宽度,长度都是由文档和浏览器来决定的,这时候想要在所有的终端上都有很好的体验就需要Media Query来解决问题。
4、Media Query
通俗的解释就是CSS的媒体查询功能,它既能够准确的识别设备也能够自己设定分辨率或者宽度,w3cshool里有Media Query的参考文档,如果你嫌文档太多我可以粗略的解释一下它的工作原理。
在有必要的时候你可能会给一个box设置高度,当box拥有500px高度时它可能在PC上看起来不错,但用手机打开时就有些吓人了,整个box充斥了页面,里面的内容排列混乱,严重的影响了用户体验,这时候你就可以使用媒体查询Media Query,用它单独的为不同大小的设置不同的高度,比如640/320打开时box时就分别处于300/200px的高度,这样看起来就不错了。
大家可能会想到import,实际上媒体查询就可以这样理解,它为不同的宽度或设备设定了类似于import的css规则,保证了实际渲染完成页面的效果。
正能量浅谈响应式网站建设前端设计由正能量深圳网站建设公司(http://www.znlds.com/)小编整理,如需转载请注明出处!
正能量专注网站建设,为客户量身定制各类网站建设业务,包含赢利型网站建设、企业型网站建设、商城型网站建设、微信小程序开发、APP开发制作、门户型网站建设、品牌型网站建设等各类网站建设,正能量实战经验丰富服务过上千家企业,成功案例众多。正能量以客户利益为出发点,为客户规划、定制符合企业营销价值的网站建设方案,提供从网站前期定位分析策划、技术架构,到网站界面设计、创意表现、站点架构搭建以及后续访问监控、维护、网站运营反馈建议等一系列服务。免费咨询电话:400-008-3268。
如需转载请注明原文出处: 正能量浅谈响应式网站建设前端设计! http://www.znlds.com
Tags:响应式网站建设