首页 > 策划 > 关键词 > 响应式网站最新资讯 > 正文

谈谈响应式网站前端设计

2015-05-19 15:25 · 稿源:wittsay.cc

一段时间之前我对响应式的概念还是Bootstrap、Amaze之类的框架组件,用过几次也不以为然,我想国内搜索引擎在提供移动搜索结果页时还是会给移动网站加分的,却不能像google一样识别响应式网站,可能还需要一段时间发展。但毫无疑问的是现在Web趋势转向移动优先,当然如果你用域名或者其他解决方案也不是不可以,只是响应式可能更简单一些,发展前景也是不错的。

这两三个星期我每天都在写响应式页面,借此累积了不少响应式页面和ajax的经验。我大致的梳理了几个响应式页面的重点,如果想往这方面发展或是对它有些兴趣,希望能给大家一点帮助。

控制大小

习惯了PC页面的前端开发者可能更加喜欢用pc来控制大小,但在响应式的页面中出现更多的是em和rem,用它们来控制字体大小甚至是框体大小对整体的效果非常明显。

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

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

百分比

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

box1{ width:100%;}

ul{ margin:0 2%;}

我并不是推崇全部使用百分比来布局,但有时候这可能会大大减少工作量,给box1宽度设置100%之后它会自动以宽度填充满整个浏览器,不管你是手机PC什么分辨率,它总是有很好的表现。这时候你给box1下面的ul设置左右2%的margin也是如此,随着浏览器窗口大小改变时ul的实际margin大小也会随着变化,这么一说大家多少也都理解了百分比布局的概念。

当然有时候也不会有想象中的效果,特别是在较小的分辨率上时,原来看似不错的百分比设定会显得很怪,因为响应式多数时候只约定宽度,长度都是由文档和浏览器来决定的,这时候想要在所有的终端上都有很好的体验就需要Media Query来解决问题。

Media Query

通俗的解释就是CSS的媒体查询功能,它既能够准确的识别设备也能够自己设定分辨率或者宽度,w3cshool里有Media Query的参考文档,如果你嫌文档太多我可以粗略的解释一下它的工作原理。

在有必要的时候你可能会给一个box设置高度,当box拥有500px高度时它可能在PC上看起来不错,但用手机打开时就有些吓人了,整个box充斥了页面,里面的内容排列混乱,严重的影响了用户体验,这时候你就可以使用媒体查询Media Query,用它单独的为不同大小的设置不同的高度,比如640/320打开时box时就分别处于300/200px的高度,这样看起来就不错了。

大家可能会想到import,实际上媒体查询就可以这样理解,它为不同的宽度或设备设定了类似于import的css规则,保证了实际渲染完成页面的效果。

媒体查询也可以为一个页面准备多个不同的CSS,当设备大小不同时使用不同的CSS文件,如果样式文件比较大也可以考虑这种方法。

说说框架

我见到过和实际使用的前端框架中,不少都是富前端类型的设计,并不建议新手前端盲目的使用框架来布局,不管框架看起来多美好。在实际的使用过程中大家可能会发现很多问题,比如类名太多太复杂(在没有很多的css经验时可能对约定的类名所知甚少)、样式冲突。引入资源过多导致页面繁重、偏离设计效果等等。

就拿bootstrap来说,如果你要设计一个类似于google的搜索框就显得很难,google类型的搜索框实际上是将一个input包含在box里面,然后在这个box里面再加上左右图标,如果你用bootstrap来做可能会出现很多莫名奇妙的冲突,但实际上你得到了什么呢?一个圆角一个行高?还是他的百分比宽度呢?这些用css来写只不过是几句代码的事。

还有一些框架过度的依赖AJAX,它们也许想法很好,大量的AJAX在前端看起来的确很酷,对用户的友好性也足够强,但大量的请求对服务器并不友好,可能会使服务器的实际负载大大下降。总之还是一句话,按实际需求来解决问题,框架并不是万能的。

  • 相关推荐
  • 大家在看
  • 微软调整Win10:新版Edge能将网站站点固定在开始菜单

    对于微软来说,不管用户是不是买账,他们都在猛推自家的新版Edge浏览器,虽然市占率全球第二,但跟第一名Chrome相差甚远。作为经典版 Microsoft Edge 的一项特色功能,其允许用户将指定站点固

  • 陌声APP响应及时,投诉处理解决率100%

    近日,从深圳市消委会获悉,陌声APP消费通评价指数得分5. 4 分,位居行业较高水平。这是继陌声APP正式开始在深圳市消委会消费维护公共平台——" 315 消费通"受理消费者投诉后评分上的一次重要突破。 从数据上可知,本次消费评价指数在接单速度、提出方案速度、和解成功、调解成功等维度均有明显提升。这反映了陌声APP在快速响应消费者投诉且处理成功率较高,大大降低了消费者维权成本,体现了经营者对消费者的重视,消费者的服务?

  • Napattiga娜帕蒂卡高端乳胶品牌在曼谷central world big c开幕

    10 月 10 日,泰国曼谷的Napattiga(娜帕蒂卡)又有一家旗舰店正式开业。与以往不同的是,这次Napattiga(娜帕蒂卡)对新店进行了改良和升级,除了产品展示基础上,还增加了产品体验区,娱乐区和休息区,乳胶产品普及区,为用户提供多元化了解真正泰国乳胶魅力的机会,给消费者带去高质量的体验赋予消费者更多的归属感。一、Napattiga(娜帕蒂卡)泰国曼谷central world big c旗舰店开幕2020 年在整体经济市场遭受重创,乳胶行业整体增速

  • 如果你的网站已经过时了,咋整?

    市场营销的目的无疑就是为了吸引用户的注意力。关注者、朋友、访客、粉丝、点击、喜欢、分享都是吸引关注的量化表达。要想在游戏中立于不败之地,你需要一个有吸引力的网站、一个有用的博客和引人注目的视觉效果。

  • OpenCL 3.0最终版规范发布:老牌图形API开倒车式自救

    日前,行业组织Khronos发布了OpenCL 3.0最终版规范,从而将4月份的临时规范转正。作为老牌的GPU并行计算标准,它希望借此焕发第二春,但能行吗?OpenCL最早由苹果开发,后经NVIDIA、AMD等完善

  • 蝉大师独家上线:一键知晓iOS14对我的App的优化影响

    iOS14 正式版上线后,许多用户都沉迷于各种屏幕小组件,但对于ASOer来说,更关注的iOS14 对于自身产品的影响。此前蝉大师结合数据分析发现:iOS14 在榜单和热搜数据与iOS13 相比没变化,主要变化集中在建议词与修正词。许多ASOer对此表示困惑,iOS14 新出现的推荐词对自家产品具体会有什么影响?后续该怎么调整优化关键词呢? 基于此,蝉大师在全面支持iOS14 系统关键词数据的基础上,重磅推出了三大贴心功能: 1 增iOS14 关键词诊?

  • 维基百科网站即将大幅改版

    DoNews 9月25日消息(记者 刘文轩)知名线上百科全书网站维基百科(Wikipedia)在过去 20 年来,已经拥有 5300 万个条目,支持各种语言,但用户界面始终没有任何明显变化,一些元素看起来甚至有些过时。2019 年 5 月起,维基媒体基金会启动一项多年计划,着手于改进维基百科桌面版的用户界面,包括重新组织 logo、可折叠侧边栏、目录列表等。这些改变将逐步引入,让用户有充分的时间测试和反馈。如果一切顺利,这些变化将在 2021 ?

  • SEO排名,如何提高网站信任度?

    ​在现实生活中我们知道在人与人之间建立信任是社交活动十分重要的事情,这一点对于搜索引擎而言,也不例外,一个受信任的网站,往往会得到更多的流量倾斜。

  • 如何把快死掉的网站变成月入40万+的摇钱树

    ​今天介绍的案例是一个利用百度SEO产品, 2 年时间把快死掉的网站做到月入 40 万+的摇钱树。网站 2018 年建站,只用了 2 年,做到权7,日流量 16 万+。同样的业务逻辑,同样的内容,网站前身SEO流量还是0。这家公司的SEO策略有哪些值得学习的地方呢。一起聊聊

  • 雪佛龙禁止全球员工使用微信!为响应美国政府禁令

    前不久,美国政府发布命令禁止美国个人及企业与腾讯公司进行与微信有关的任何交易,甚至禁止他们使用微信。本周二,有消息报道,能源巨头雪佛龙公司要求该公司全球员工从手机上删除微信应用,其也成为首批响应美国总统行政禁令的美国公司之一。

  • 网站导航:7个最佳实践,设计技巧和警示

    一些小的事物可以创造大的变化,网站导航栏就是一个很好的例子。导航的结构和标签可能会对结果产生巨大影响

  • 轻松筹积极响应国家政策,为百姓带去福利

    在九月的第一天, "惠桂保"普惠型补充医疗保险计划被大众所知,并可以正式开放投保,这是轻松筹与国富人寿联合推出的,"惠桂保"这款普惠性商业健康险产品是特意针对广西地区参保人群而开发的,它与我们经常见到的保险品种不一样,它能有效衔接基本医疗保险,具有准入门槛相对较低、保障范围广等特点。这个保险被大家所知后,反响强烈。对广西人民来说可是意外之喜,因为填补了基本医疗保险和商业健康险的过渡地带的空档期,解决广?

  • 颈挂式运动蓝牙哪款好?十大颈挂式运动耳机排行

    对于一个健身达人来说,没有音乐的运动是没有灵魂的。特别是平常室外跑步时,如果不能用耳机将自己与世界隔离,就无法很好地沉浸在运动过程中。对于一部分人来说,带上耳机也能让自己显得不那么孤单。运动时身体的动作幅度是比较大的,普通的有线耳机肯定不行,很容易就被钩住。无线蓝牙耳机就更不行了,跑几步就不知道掉哪去了。为了能更好的体验运动的过程,达到更棒的健身效果,推荐几款性价比高的颈挂式蓝牙耳机给大家~1.NANK?

  • 拼多多拿下春晚:是快手式的KPI,还是腾讯式的“偷袭珍珠港”?

    今年在各大电商备战 618 的时候,拼多多忙着助贫助农,关键时刻联合湖南卫视祭出拼多多 618 晚会,扳回一局。如今时逢双节同庆,友商们也在为双 11 预热,拼多多却横跨两阶,直指春晚,补足“失去”的年味。怎么回事?

  • 我建了一个小众软件评论网站,靠SEO实现6位数收入

    再小众的市场,如果做到极致,也能让你获得可观的收入。比如SelectSoftware Reviews (下文简称为SSR)是一个人力资源软件评论网站(网址:www.selectsoftwarereviews.com),致力于帮助人力资源和招聘团队通过免费的在线指南找到并购买最佳的软件。

  • YouTube网站重新提供面向iOS 14画中画的兼容性

    YouTube周四恢复了对苹果iOS14 画中画功能的兼容,这将可以让所有用户从他们的移动版浏览器最小化内容然后查阅其它信息。本月早些时候,YouTube做出了一个有争议的改动,将PiP功能限制在YouTube Premium用户范围。

  • Facebook被指扼杀左倾新闻网站流量

    据外媒TheVerge报道,《华尔街日报(WSJ)》报道称,Facebook在2017年对其新闻feed算法进行了修改以减少MotherJones等左倾新闻网站在其平台上的可见性,据悉,该计划由CEO马克·扎克伯格亲自批准。

  • 网站测速就找ping.cn,一个更加专业实用的ping检测工具

    相信不少网站运营者时常会用到ping操作检测网站速度等问题,不过目前国内很少有专业的ping检测平台,比如监测节点覆盖地区少、覆盖不全面、检测节点不稳定、检测结果不准确、功能少等情况。

  • 企业网站排名回升后,快速下跌是什么原因?

    国庆假期期间,很多SEO人员,都是喜笑开颜的,理由非常简单:大量的网站关键词排名都开始回升,特别是之前一些“作弊”的网站,很多站的权重大幅度的提升。

  • 网站301实战讲解教程、几个步骤教你正确转移权重!

    最近许多兄弟问我网站 301 有什么注意事项,应该怎样正确做301、本篇内容本着实战的原则、给大家讲解一下!

  • 参与评论
文明上网理性发言,请遵守新闻评论服务协议
  • 热门标签