堂主 - WEB前端开发

专注于互联网 | WEB前端开发 | 以用户为中心的体验 | 家是圆心 | Code is art !

博文列表

新博客模板!

6 comments

清明假期前后几天,抽时间做了博客的新模板,同时将博客后台程序由ECMS 6.5升级到了最新的6.6版本。赞叹帝国开发者WC的给力之余,也感觉自己拿ECMS只仅仅做个博客简直就是大材小用了。

设计阶段:

博客模板在配色上借鉴了一个国外的配色网站的模板,具体网址找不到了。当初看到那个网站的界面感觉配色非常好,简洁清淡且功能区划分明确。

这次的模板不同于以往。以往做自己的博客模板都是结构代码随写随寻思样式,基本上是coding+designing并行。而这次是PSD设计图先行,待设计图就位后才开始后续工作。

设计PSD图的时候采用了黄金分割+栅格的技巧,大量运用参考线来找对齐。后续又进行了微调,直至自己感觉满意为止。非设计出身,拍砖请留情啊 : p

参考线.png

如何使用CSS3 Media Queries技术创建wap网站

0 comments

原文地址:http://www.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/

堂主译文地址:http://www.osmn00.com/translation/224.html

转载请尊重原作者及译者劳动,附带以上信息,谢谢合作~

印象里此文之前有人翻译过,但堂主也是在翻译完之后才得知的,所以此文之后在我的电脑里“躺”了5个月之久。直到今天翻移动硬盘寻找资料才发现还有这么个文章,想想毕竟是自己的劳动,同时也算是一个学习的笔记,于是发了出来。

----------------------------------- 分割线,以下是正文 ---------------------------------

CSS3给网页设计和开发人员带来的感受一直是痛并快乐着。一方面我们为CSS3所能解决的问题和展示的远景感到欣喜,另一方面却又为IE8对其支持的匮乏而惆怅。我们这篇文章里要谈论的就是IE8尚未支持的一部分CSS3技术。但是这并没什么太大关系,因为这个组件最有价值的应用环境——小型的如iPhone和Android设备等——已经可以很好的支持它了。

在这篇文章里我将说明如何使用一点点CSS3代码就能为你创建一个适应于iPhone浏览的网站版本。我们将看一个非常简单的例子,同时我也会讲述向我们自己的网站中添加一个适合移动小型设备浏览的样式表的过程来展示创造一个适合手机浏览的网站是多么的简单。

Media Queries

如果你曾经为一个网站创建过应用于打印设备的样式表,那么你不会对为特殊情况创建样式表的思路感到陌生。在CSS2中通过media types来应用这个功能。Media Types使你能够根据媒体的种类来应用样式,比如打印机和手持设备等。不幸的是,设备们从来都没对media types提供过什么好的支持,我们基本上看不到它有过什么应用。

CSS3继承并发扬了 Media Queries。不同于以往对设备型号的判断,这回它们将着眼点放在了设备自身的能力上,你可以使用它们来检查所有的事情,例如:

  • 浏览器的宽和高
  • 设备的宽和高
  • 屏幕是横款还是竖款的
  • 分辨率

如果用户拥有一款支持media queries的浏览器,那么我们就可以为某些特定的条件书写特别的CSS。比如,我们可以靠某些特征描述检测到用户使用的是智能手机,这样我们就可以为这种情况下的浏览提供一个特别的样式布局。来看一个例子,英国WEB开发者会议(UK web conference)dConstruct 刚刚推出了2010年集会的专题网站,其中便使用了media queries技术。