现在的位置: 首页网络>正文
改了一下模板,宽度自适应且风格扁平化
发表于2年前 网络 评论数 3

很长一段时间没有折腾模板了,因为很长一段时间都不打理站点,之前整站都是模仿苹果官网的效果,毕竟在审美领域,苹果一直是走在前沿的,网站的美工自然不用说。但是时代变迁,现在苹果官网也大变样,要素扁平化,并且全局导航栏,貌似这种风格是谷歌先带头的吧,当然这种风格也符合苹果的“简洁既是美”。

至于宽度自适应,已经由来已久,只是全部加载网站要素很费流量,并且我以前的小塞班根本访问不了,所以采取响应式布局的方式。电脑采用一个模板,移动设备用另一个模板,这样子比较省流量,打开速度也快,关键是还增加收录量,因为同一篇文章有两个链接,所以算两篇,并且网站有手机版的模板,在手机上搜索的时候,权重会更高,排名更加靠前,实践中确实如此。响应式布局缺点就是要搞好几个模板,维护起来麻烦,而且现在的设备屏幕宽度各异,要全部匹配很难。

但是现在普遍都是wifi环境,并且手机机能也已经有质的飞跃,所以宽度自适应也不要紧了。自适应的话,可以保持风格统一,在电脑或者手机上访问不会有太大区别,缺点就是收录量就会被砍掉一半了,在手机上的搜索结果也没有了优势,所以一般大站都还是采用响应式布局,从我实际经验来看,手机搜索结果点击进来的流量起码占三分之一,所以利弊权衡大家自己考虑好了。

改了一下模板,宽度自适应且扁平化

saintsky由于太长时间不更新,收录和权重早就所剩无几,改模板啊什么的都无所谓了,K站就K站了,并且我比较喜欢高度统一的风格,win 10就是微软为了电脑、平板、xbox风格上统一而不懈努力的结果。

出于以上种种,我决定改模板,因为不是很懂网站这些东西,所以瞎改改了好些天。

扁平化方面,首先,去掉LOGO,纯文字替代,文字既是符号,简洁明了。导航要素也全部去掉,就留下文字,一来简洁,二来是因为我不会改导航,囧。然后模板里所有图片要素,全部用CSS颜色代替,配色方面不知道是因为最近压力大,还是天生对色彩不敏锐,索性就改成了黑灰白,有点单调啊,但是我还蛮喜欢,很高冷有木有。

自适应方面也不是很复杂,首先在head里加上:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />

然后模板就会自动确定设备宽度,user-scalable=0是为了锁定页面缩放,这样子在手机上下滑动的时候更顺滑。

然后在CSS的img标签里面加入:

max-width: 100%;

height: auto;

这样子可以让文章里的图片长宽自适应。

之后就可以在CSS里加入:

@media screen and (max-width: 730px) { xxxx}

这句话的意思就是当页面小于730px的时候,你希望网站的样式是怎么样的,xxxx里面的内容就是你想要的效果。我用了三个@media,一个730px,一个700px,一个500px,这个自然是越多越顺滑,看需求了,有一点要注意的是,一定得是500px在最上面,然后一次排下去,不然会不生效的。

剩下的就是全部width改成auto,这个也是自适应必不可少的,然后该加float的地方加float,一般就是侧边栏而已。

最好也是最难的,就是导航栏的问题了,由于我不会,所以上网找了好多个导航的代码,但是都不是很满意,唯独这个还可以,但是iphone上面不支持hover标签,所以在iphone上这导航是失效的,网上说支持,但是实际上没效果,不知道什么情况了,这个还有待研究。

最最关键的是,全站广告都去掉了,因为收益太低了,而且自适应的效果不佳。

总的来说效果还可以吧,一个不会代码的人已经尽力了,欢迎各位拖动浏览器宽度来看一下。

目前有 3 条留言 其中:访客: 3条, 博主: 0条

  1. 路易大叔 : 2015年03月12日19:42:00 回复

    自适应还是很方便的

  2. causin : 2016年01月21日16:10:03 回复

    能留给微信号么?

  3. 过期域名抢注 : 2016年03月16日14:40:36 回复

    解释的通俗易懂 有空我也把我博客弄成自适应

给我留言