会员专栏

CSS3 Media Queries 片段

Responsive设计在现代Web设计中可谓是越来越流行,但很同学们并未理解其真正的设计概念,往往把Responsive视为一种自适应布局。当然有很多同学也在尝试动写Responsive的案例,但如何取其断点左右纠结,如何设置哪几个断点?又从何入手?

Responsive中的断点都依赖于CSS3的Media Queries来决断。曾在CSS3 Media Queries模板使用em单位创建CSS3的Media QueriesiPads和iPones的Media Queries有过这方面的介绍。今天特意根据一些Responsive框架整理了一些常见的Media Queries片段,以供大家参考。

六种实现元素水平居中

居中效果在CSS中很是普通的效果,平时大家所看到的居中效果主要分为三大类:水平居中、垂直居中和水平垂直居中。而其中水平居中相对于后两者来说要简单得多。早期总结了一下互联网上有关于水平垂直居中的几种实现方案,比如说《CSS制作水平垂直居中对齐》中介绍了八中实现水平垂直的方案,而在《CSS制作图片水平垂直居中》一文介绍了四种实现图片垂直居中的方案,并且在《CSS3实现水平垂直居中》使用了css3的flexbox的属性轻松实现多行文本水平垂直居中的方法。当然大家有可能认为这些方法对于浏览嘎嘎的兼容性处理太烦了,也有人使用jQuery的方法实现水平垂直居中效果,比如在《jQuery制作元素在屏幕中水平垂直居中效果》中介绍的。今天我在这篇文章中向大家介绍实现水平居中的六种不同方法,希望对大家有所帮助。

Clip

Clip属性是大家经常会误解的一个属性,这篇文章帮助大家充分的了解和学习clip属性,用这个属性制作出更好的效果。如果你不知道也不用担心,接下来的内容将会涵盖clip属性的各个方法。详细阅读这篇文章,你将对clip属性有一个很深的了解。Clip属性在W3C官网是这样进行描述的:“通过对元素进行剪切来控制元素的可显示区域,默认情况下,元素是不进行任何剪切的,但是也有可能剪切区域也显示的设置了clip属性”。

iPads和iPhones的Media Queries

CSS3 Media Queries是一个强大的媒体查询功能,他的出现使用我们的站点可以随着不同的设备展现出不同的样多风格。紧随着Responsive设计的出现,Media Queries的功能是越来越得到前端人员的亲眯。

我也不另外,跟着这股时尚流行风,从接触到学习,紧接的到应用,对这个属性有了基本上的了解和实战经验。为了大家方便使用Media Queries,W3cplus通过互联网的搜集整理了一份CSS3 Media Queries模板。随着移动端上的应用越来越多,特别是苹果公司的系列产品型号的增加,给前端人员对Media Queries的运用带些许的麻烦。为了解决这个麻烦,在互联网上搜集了相关的资料,专门针对苹果的iPads和iPhones的Media Queries模板,希望这些模板能帮助大家减少在网上查找的时间。

image-set实现Retina屏幕下图片显示

最近一直在学习Retina屏幕下图片的处理方法,从《走向视网膜(Retina)的Web时代》一文中知道了Retina这个新名词,同时知道了他是什么东东,同时也继续在探讨Retina方面的知识点,随后在《移动Web——CSS为Retian屏幕替换图片》和《使用css sprites来优化你的网站在Retina屏幕下显示》中学习了Retina屏幕下图片的设置方法,或者说技巧吧,接下来《Web设计师如何制作Retina图像》学习了Retina屏幕下的图片制作技巧。其实可以说,这几篇文章可以让我知道如何在Retina屏幕下处理图片的技巧和细节了。因为这几篇文章从概念到制作Retina屏蔽下的图片,以及Coding实现,可以说是一条龙了。这些都是自以为事,为什么呢?除了这些方法,其实还有更先进的方法,这也就是我接下来要说的事情了。

走向视网膜(Retina)的Web时代

Retina对我来说是一个全新的概念。初次接触还不知道是什么意,后来翻译后才知道“视网膜”,在互联网上海量搜索一翻,这是我们前端的一个新知识点——视网膜Web。的确是个NB的新事物,我一开始看简直不知道是什么东西,后来慢慢的看了一些专业术语,结合业务的高人写的博客,总算是对其有一点点的了解。同时把这几天看的东西做了一下学习笔记,希望对一些新接触 Retina的同学有许些的帮助。(因为自己对这一块知道的不多,有可能有写错的地方,希望这些地方不会误人子弟,罪过罪过),更希望有错的地方能得到同行朋友的指正。

Responsive Web Design

上次花一天的时间写了一篇《Responsive设计的十个基本技巧》,在这篇文章中主要向大家介绍了Responsive设计的十个基本技巧,其中涉及的面也非常的广,一时理解或者说学习起来还是有一定的难度。有些初次听过Responsive的或者初次接触Responsive的同学还是有点难度,为了能帮助大家进一步的了解和学习Responsive,今天我为大家整理了一篇《Responsive Web Design》,这篇文章主要从几个内容引导大家如何学习Responsive设计。希望对大家有所帮助。

Responsive设计的十个基本技巧

Responsive Design对于我来说一点都不陌生,从他在这个互联网出现的时候,就一直在观注他的成长,而且在w3cplus站上也分享了很多这方面的教程和资源。由于组织了YY活动在线上和大家分享Responsive的设计,为了能让大家更好的理解,我自己也有必要好好的做一下功课,今天这个就是功课,想和大家一起分享一下Responsive设计的一些基本技巧,和相对应的学习资源,希望对大家有所帮助。

细说百度图片栏目——图片展示效果

今天写个DEMO效果时,无意之中在Baidu图片中发现其图片列表使用了CSS3的transform,transition,box-shadow等属性。这是不是可以说百度在开始引领国内的CSSer开始使用CSS3相关属性呢?如果是的话,那这对于前端开发人员来说是一件福事。毕竟百度是国内互联网中大企业之一,他的一些举动都将有很多前端人员跟随着。这些都是我个人的猜想,仅供参考,因为我就是一个CSS3的爱好者,今天我想拿这个效果来说说自己的想法。如有不对还请谅解。

CSS3的calc()使用

calc()对大家来说,或许很陌生,不太会相信calc()是css中的部分。因为看其外表像个函数,既然是函数为何又出现在CSS中呢?这一点也让我百思不得其解,今天有一同事告诉我,说CSS3中有一个属性能实现自适应的布局,首先让我想到的是box-sizing,但跟我说还可以计算,这让我不得不想起calc()。因为早先在官网和一些blog上看到相关的介绍,但一直没有深入,也没有自己去测试过。今天花了一下午的时间彻底学习了一下calc()。于是就有了这篇blog,希望对大家有所帮助。

页面

返回顶部