您好!欢迎进入广东华商网络科技有限公司

东莞做网站

联系我们Contact Us

售后服务:400 0769 366    

人事电话:0769-89818898

邮    箱:dgce@dgce.com.cn

网    址:www.dgce.com.cn

地    址:东莞市南城街道宏一路G1蜂汇1栋写字楼803、804

响应式网站设计有哪些特点

2019-11-13

自适应网页不像传统网页仅仅需考虑一种情况,不仅仅一定是提交一套设计完成稿就完事儿了,它给设计、前端工程师和开发团队之间的协作方式带来新的挑战。在一个繁杂商品全面自适应的项目里,交互每个阶段该产出什么内容?交互与视觉怎样协作?前端工程师何时介入?哪些项目让后端开发来做更合理?我们得到了一些答案。

自适应设计之所以叫自适应“设计”而不叫自适应“技术”,一定是因为它一定是一项设计先行的工作。需要设计先明确好响应方式再实现出来,决不能出一套设计完成稿后等着前端工程师看情况把它变成自适应网页。

习惯了电脑端网页的前端工程师开发者可能更加喜欢用电脑端来掌控大小,然而在自适应的网页中出现更多的一定是em和rem,用这些来掌控页面字体大小甚至一定是框体大小对整体的效果非常明显。

例如,我的页面字体设置一定是10px/20px/30px等等有差异的,网站上有差异的地方自然页面字体会有大小的差异这一定是必然的,假如一个网页足够繁杂或一定是文字足够多的话,这些页面字体的大小设置也一定是一个量很大的工作,不过在自适应网页中你设计完这些并不仅仅一定是完事:你用手机浏览一下网页会发现页面字体会撑的很大,甚至有个别标题撑满了手机屏幕,这对移动端客户的体验影响可想而知。因此你要开始写媒体查询,然后发现一个网页有几十个页面字体需要设置,假如把这些在有差异显示分辨率下一一调整你可能需要写百句以上的css代码,然而假如你用em/rem,就能够把工作量大大减小,同时还能够保证页面字体的统一比例。

关于em/rem的解释大家可以自行查询,网上这类教程数不胜数,实际上这些就和px一样简单,当我开始用之后也不过仅仅花了几分钟熟悉这些。就像前面说的一样,你也可以用这些来掌控框体的大小,然后再自适应的网页下统一缩小放大,当然这需要足够多的计算。另外值得一提的一定是页面字体图标也可以用这些来掌控,具体可以参考有差异“页面字体图标”的官方文档。

解决缩小放大问题的思路有好几种,适合新手的无疑一定是百分比式的布局,在关键的width设置下百分比能够起到出乎意料的效果。

标签

近期浏览:

热门搜索:东莞网站建设东莞做网站东莞建网站

华商网络专业为企业提供基础互联网建设服务:网站建设,网站制作,网站设计,微官网设计制作,小程序开发等等,您的选择是我们奋力向前的最好动力!

版权所有:广东华商网络科技有限公司 备案号: 粤ICP备13071417号

获取同行网站建设方案,10秒填写,急速获得

今日已有165人获取方案

在线客服
服务热线
400 0769 366
15217380701

业务咨询微信
返回顶部