天兴工作室

主题演示站

什么是自定义(响应式)?有什么优点和缺点?

天兴工作室制作了许多zblog自适应的模板,但是有的朋友在使用的时候会问:什么是自定义(又名响应式)?有什么优点和缺点?本文尝试回答下此问题。

响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。

响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验,而且随着目前大屏幕移动设备的普及,用“大势所趋”来形容也不为过。随着越来越多的设计师采用这个技术,我们不仅看到很多的创新,还看到了一些成形的模式

随着移动互联网的兴起,越来越多的人使用手机上网。移动设备正超过桌面设备,成为访问互联网的最常见终端。

于是,网页设计师不得不面对一个难题:如何才能在不同大小的设备上呈现同样的网页?

手机的屏幕比较小,宽度通常在600像素以下;PC的屏幕宽度,一般都在1000像素以上(目前主流宽度是1366×768),有的还达到了2000像素。

同样的内容,要在大小迥异的屏幕上,都呈现出满意的效果,并不是一件容易的事。很多网站的解决方法,是为不同的设备提供不同的网页,比如专门提供一个mobile版本,或者iPhone / iPad版本。这样做固然保证了效果,但是比较麻烦,同时要维护好几个版本,而且如果一个网站有多个portal(入口),会大大增加架构设计的复杂度。

于是,很早就有人设想,能不能"一次设计,普遍适用",让同一张网页自动适应不同大小的屏幕,根据屏幕宽度,自动调整布局(layout)?這就是自适应(响应式了)

bg2012050107.jpg

自适应(响应式)的优缺点:

优点: 面对不同分辨率设备灵活性强;能够快捷解决多设备显示适应问题。

缺点:兼容各种设备工作量大,效率低下;代码累赘,会出现隐藏无用的元素,加载时间加长;其实这是一种折中性质的设计解决方案,多方面因素影响而达不到最佳效果;一定程度上改变了网站原有的布局结构,会出现用户混淆的情况。

大家可以根据自身的情况选择适合自己的zblog模板。

站长自己的观点:

如果你是个人博客网站,布局比较简单,以突出内容为重点的,建议直接使用自适应模板。

如果你是企业网站或者功能比较复杂的网站,以突出功能和交互的,建议电脑端和手机端分开做两套模板。

天兴工作室 简单zblogphp自适应后台

天兴工作室 简单zblog自适应后台。插件说明:


这个插件仅仅用来在手机上发发文章,删删评论用的。因为↓

在官方的后台不进行大换血更新之前,zblog后台想实现全部功能都自适应那估计还是有点...

PS:使用此插件可以发布文章并上传图片,但是请注意仅支持UE编辑器,并且要升级到最新版。而且只能发布一张图,发的图多了大了你会发现有一种深深的无力感,不建议去尝试。


插件使用截图:


发布文章:


小熙博客主题pro版 自适应扁平化博客主题

这是一个原创主题,免费版很早就发布出来了,收费版也算是自用版,优化了好久(也可能是懒病发作)直到现在才算折腾完。大概介绍下。

主题更新

2021年02月19日更新:这是一个很古老的主题了,应客户需求修复了反馈的一些问题;


2016年11月29日更新:取消优惠价格;升级支持最新的zblogphp1.5;修复老用户升级主题后替换原有logo的问题;增加点赞功能开关;修复一些已知小问题。

2016年8月29日更新:替换了缩略图插件:sf_img1替换为image;增加了下拉导航;增加了主题自带seo功能;增加了微语开关,不需要可以关闭此功能;修复了一些积累bug。


2015年7月25日更新:修复评论区块提示语。


2015年7月1日更新:删除搜索页面模板多余代码。

主题特点:

1、文章列表页有5种形式,有图、无图、超过4张图、超过8张图、微语。每一种形式的展现界面都是不一样的。分别如下图:

1111.jpg

2、超好用的主题配置后台,可以随意设置主题的配色;可以设置网页背景图片OR背景色等等。

3、简洁漂亮的自适应风格。

4、右侧栏有:多彩TAG、跟随滚动区块、美化版的最新评论。

拒绝IE 从我做起 zblogphp拒绝ie9以下浏览器访问的代码

最近在折腾天兴工作室的新版在,自适应碰上IE浏览器简直就是惨不忍睹。实在是受不了直接拒绝IE9以下浏览器访问我的网站了,顿时整个世界都清静了。

还好查看了网站统计,网站访客用ie6的几乎没有......

把这个东东的代码整理了下,贴出来,有同样需求的童鞋可以直接拿走,不谢。

{php}
$uarowser=$_SERVER['HTTP_USER_AGENT'];
 
if(strstr($uarowser, 'MSIE 6') || strstr($uarowser, 'MSIE 7') || strstr($uarowser, 'MSIE 8')){
echo '
<div id="ie6-alertBox">
<div id="ie6-infoBar"><h1>对不起,本站不支持低版本ie浏览器!</h1><p>站长表示实在是兼容不了低版本的IE浏览器,请升级你的IE浏览器。</p><p>推荐升级至IE9或者试试火狐浏览器和谷歌浏览器,如果你对IE是真爱......那么请关闭本站吧。</p></div>
</div>
<div id="ie6-overlay"></div>
<style type="text/css">
#ie6-alertBox{width: 600px;margin-top: 160px;margin-right: auto;margin-bottom: 0px;margin-left: auto;padding: 20px;border: 1px solid #CCCCCC;text-align: center;font-family: "Microsoft YaHei", Verdana, sans-serif; line-height: 30px;} #ie6-infoBar h1{font-size: 22px;color: #ff0000;line-height: 60px;}
</style>
';
exit;//全面停止支持
}
{/php}

将这段代码放置到你正在使用主题的header.php里面,放在<body>下就可以了。提示文字和css风格可以自定义。

然后出来的效果就是这样的:

QQ截图20150402215117.png

天兴工作室精仿煎蛋网asp版 可自适应电脑手机等设备

这个主题就是“天兴工作室精仿煎蛋网主题升级版 可自适应电脑手机等设备”的asp版本,主题的样式和功能什么的都一样的。

还是介绍下吧。

主题说明

  1. 自适应,可以自动适应电脑/手机/平板电脑等各种分辨率的设备,一套模板全解决;

  2. 后台“主题配置”页面,更换logo,修改广告位,填写网页关键词描述等可以在后台主题配置轻松完成;

  3. 右侧回到顶部按钮;


主题使用说明

需要安装ytcms和minitu两个插件;

首页调用的是默认侧栏,列表页和内容页调用的是侧栏2,右侧栏跟随滚动调用的是侧栏3。

<< 1 >>
«    2025年6月    »
1
2345678
9101112131415
16171819202122
23242526272829
30
控制面板
您好,欢迎到访网站!
  查看权限
网站分类
搜索
最新留言
文章归档
网站收藏
友情链接

Powered By Z-BlogPHP 1.7.4

天兴工作室主题演示站点,如遇到问题请联系我们的在线qq:207649916咨询