日期:2016年7月19日

什么是Viewport Meta(width详解)及在手机上的应用

  viewport是专为手机浏览器设计的一个meta标签; 有些屏幕很小有智能手机,但分辩率却可以做得很大,比如小米4的默认分辨率 为:1920*1080,比许多电脑桌面的都还大,传统桌面网站直接放到手机上阅读时,界面就会显得非常小,阅读体验就很差,就样就需要一种将原始视图在 手机上放大的机制,使用viewport标签可以解决这个问题,如 <meta name="viewport" content="width=device-width, initial-scale=1"> width=device-width: 表示此宽度不依赖于原始象素(px),而依赖于屏幕的宽度,如iphone 4(3.5寸)屏幕的大小相当于电脑屏幕上的320px显示的效果 下图为设置了viewport标签后在手机上的显示效果,注意右侧手机每格代表50个象素,目测为375px,即可能是iphone 6之类机型尺寸显示的效果: 此外viewport port标签还有一些其它属性: initial-scale:初始缩放比例 maximum-scale:允许缩放的最大比例 minimum-scale:允许缩放的最小比例 user-scalable:是否允许手动缩放… Read More

LESS vs SASS?选择哪种CSS样式编程语言?

你可能已经被关于应该用Sass还是用LESS的争论折磨死了。在这篇文章中,我会解释为什么你应该使用Sass。如果你感兴趣,我会介绍如何开始使用Sass以及在预处理时会遇到的一些问题。 在我的长篇大论之前,让我稍微提一下,你应该先学一下LESS。LESS对于初学者来说是极好的:它非常容易使用和设置,它跟CSS非常像,写起来非常直观,简单还有友好,我曾经非常喜欢LESS。 直到最近我发现了Sass和Compass的。往回看,我还是倾向于LESS是针对初学者的,是对预处理CSS很好的入门。Sass是下一代的,对有经验的前端工程师来说是很有用的工具。 为什么Sass比LESS要好 Sass有很多可用的方法和逻辑。例如:条件和循环语句。LESS也可以做到,但不是很高效且不直观。像LESS一样,Sass也内置了一些非常友好的函数,像颜色,数字,还有变量列表。 Sass用户可以使用功能强大的Compass库。这些库LESS用户也可以用,但并不完全一样,因为这是由一个庞大的社区来共同维护的。Compass有非常强大的特性,像自动生成图片切片(CSS Sprites),传统浏览器支持,还有对CSS3的跨浏览器支持等。 Compass同样允许你使用外部框架像Blueprint, Foundation 或 Bootstrap。这也意味着你可以非常容易的使用你喜欢的框架而不需要掌握各种不同的工具。 LESS的问题 LESS的目标是尽量跟CSS在风格上保持一致,包括语义和结构。这对于用户的书写习惯来说是一个很好的想法,这样也让它的工作方式和SASS有很大的不同。 逻辑语句 在LESS中你可以使用”guarded mixin”来表达基本的逻辑: .lightswitch(@colour) when (lightness(@colour) >… Read More

什么是响应式Web设计?怎样进行?

开 始第一篇。老规矩,先无聊的谈论天气一类的话题。十一长假,天气也终于开始有些秋天的味道,坐在屋里甚至觉得需要热咖啡。话说两年前也是在国庆假期里开始 做Joomla文档翻译的;长假好时光,总会可以抽出一两天,安静的窝在家里做做博客、学做些新东西,简直没有比这更舒心的事情。 说正事 儿。准备在近期的几篇里集中翻译学习一下“响应式Web设计”的相关话题,包括概念、实践方式、案例及观点讨论等方面。相比于从前做的文档译文,这些文章 篇幅要长的多(甚至要加分页了!…),今天放上的这篇几乎花掉了两天的“闲暇时间”;对耐力是个考验,努力提高喽。废话结束,here we go. 眼 下,几乎每个新客户都希望他们的网站可以有专门的移动设备版本。最完美的情况呐,就是为iPhone、iPad、黑莓、Kindle…各自打造一款 ——页面分辨率还必须兼容任何设备。谁知道未来5年内我们还需要为多少新发明的设备设计开发不同版本的页面?这种疯狂什么时候算个头? 在 Web设计和开发领域,很快的,我们将会无法跟上设备与分辨率革新的步伐。对于多数网站来说,为每种新设备及分辨率创建其独立的版本根本就是不切实际的; 结果就是,我们将会赢得使用某些设备的用户群,而失去那些使用其他设备的用户。不过,或许会有另外一种方式,可以帮助我们避免这种情况的发生。 响 应式Web设计(Responsive Web design)的理念是,页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。具体的实践方式由多方 面组成,包括弹性网格和布局、图片、CSS media… Read More

CSS3: Media Query实现响应式Web设计

十一长假已然过去了一大半。今天倒真是晴朗的不行,向窗外望去几乎可以看到阳光穿过凉爽的空气一缕缕洒落下来的样子。自从不再是学生,对每年的几次 长假就无比珍惜,想方设法让每一天都尽量过的饱满一些;夜里闭上眼,满脑子就都是Drupal、博客、咖啡、使命召唤、南方公园…也许需要出门走一走 了。 OK开始说正经的了。在之前一篇译文中,我们了解了响应式Web设计的概念、组成要素以及基本的实现思路。今天继续相关话题,我们将从前文介绍过的“弹性布局结构”这方面出发,通过一个具体的实例来深入学习。 如 今的屏幕分辨率,小至320px(iPhone),大到2560px甚至更高(大显示器),变化范围极大。除了使用传统的台式机,用户会越来越多的通过手 机、上网本、iPad一类的平板设备来浏览页面。这种情况下,固定宽度的设计方案将会显得越发不合理。页面需要有更好的适应性,其布局结构要做到根据不同 的设备及屏幕分辨率进行响应调整。接下来,我们将了解一下怎样通过HTML5和CSS3 Media Queries(媒介查询)相关技术来实现跨设备跨浏览器的响应式Web设计方案。 范例效果预览 首先,我们来看看本篇范例的最终效果演示。打开该页面,拖拽浏览器边框,将窗口慢慢缩小,同时观察页面结构及元素布局是怎样基于宽度变化而自动响应调整的。 更多范例 我(原文作者)使用media query的方式设计了一些WordPress模板,比如Tisa、Elemin、Suco、iTheme2、Funki、Minblr和Wumblr等。 概述 我们将范例页面的父级容器宽度设置为固定的980px,对于桌面浏览环境,该宽度适用于任何宽于1024像素的分辨率。我们通过media query来监测那些宽度小于980px的设备分辨率,并将页面的宽度设置由“固定”方式改为“液态”,布局元素的宽度随着浏览器窗口的尺寸变化进行调 整。当可视部分的宽度进一步减小到650px以下时,主要内容部分的容器宽度会增大至全屏,而侧边栏将被置于主内容部分的下方,整个页面变为单栏布局。 HTML代码… Read More