media queries

不使用Media Queries的自适应CSS

虽然标题说不用Media Queries,但我还是要在开头讲清楚,本文并不是要大家丢掉Media Queries,也不是要抨击Media Queries。Media Queries实际上非常有用,我在各种地方都会用到。但Media Queries并不能解决所有的自适应的设计问题。常常有一种需求是根据元素所在的组件本身的大小来决定元素的排列,而不是整个视窗的宽高。要解决这类问题,Element Queries的概念诞生了。然而,Element Queries只停留在概念上,Mat Marquis 也针对这个概念提出了一些问题,并且称之为container queries。不过可惜这些都只停留在概念上。也许未来有一天,这些概念会成为现实,不过与此同时,我也来分享一些小技巧,你现在就可以用来处理某一类的问题。

响应式网站Gilt.com之二:Block vs. In-selector Media Queries

在第一篇文章中,分享了如何组织一个成功的回顾总结会议。那么在此文章中,主要讨论我们工作中所用到的技术以及如何组织媒体查询。通过实战来介绍在项目中使用块媒体查询好还是在选择器中插入媒体查询方便。

七个高度有效的媒体查询技巧

随着移动设备以及用户终端种类的不断增加,响应式设计在Web是运用越来越广泛。而响应式设计中媒体查询又起着举足轻重的作用,可以说离开了媒体查询,响应式设计就没有了他的灵魂。换句话说,响应式设计做的优秀不优秀,看媒体查询的使用就能知道。到目前为止,智能移动设备的普及化,我们的响应式设计应该考虑移动先行。那么移动先行如何实现呢?媒体查询又对其有什么使用呢?欲想了解,烦请阅读根据的《7 Habits of Highly Effective Media Queries》译文,让你把媒体查询运用的更灵活。

CSS3 Media Queries 片段

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

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

iPads和iPhones的Media Queries

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

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

Medial Queries的另一用法——服务于IE

随着Responsive设计的流行,Medial Queries可算是越来越让人观注了。他可以让Web前端工程实现不同设备下的样式选择,让站点在不同的设备中实现不同的效果。这个早前在w3cplus已经介绍过,如果你还没有接触,不仿点击这里详细阅读。今天在看blog时发现一个其他的使用方法,就是利用@media来做一些IE下的特殊效果。

CSS3 Media Queries在iPhone4和iPad上的运用

CSS3 Media Queries的介绍在本站上的介绍已有好几篇文章了,但自己碰到的问题与解决的文章还是相对的较少。前几天在《修复iPhone上submit按钮bug》上介绍了修复form中sumit按钮的bug。同一个项目,为了实现iPhone和iPad横板与竖板的风格,让我还是头疼了一翻。

一开始按照CSS3 Media Queries模板中的介绍来运用,虽然帮我解决了iPad的横板与竖板的风格渲染问题,但在iPhone4上还是存在问题的。后来结过网上的查找,总算是问题解决了,下面就来看看问题是如何解决的。

在具体开始之前,先来看看他的源码:

CSS3 Media Queries模板

最早在《CSS3 Media Queries》一文中初探了CSS3的媒体类型和媒体特性的相关应用。简单的知道了使用这个能在各种不同的设备显示不一样的样式风格。随着Responsive的响应式设计的兴起,前面跟大家一起学习了:

CSS制作Facebook的媒体对象

前面在《OOCSS——核心篇》一文中有简单的提到Facebook的媒体对象(有的地方称作为“信息状态块”)的制作。那么今天老话重谈,主要使用不同的几种结构来制作这个媒体对象效果:

我们把上图拆分细化一下,可以划成下图的样子:

根据上图我们就可以轻松的写出需要的HTML结构。

HTML Markup:

Responsive设计和CSS3 Media Queries的结合

Responsive这个词,这段时间公司老是在提,致使我大量的查找相关方面的资料学习。总算是能做出小小的东西出来,也让自己有点满足感。今天我想和大家一起来学习web designer wall的《Responsive Design with CSS3 Media Queries》教程。从这篇教程中,我们可以学会如休何使用CSS3的Media Queries属性来实现Responsive设计。

页面

返回顶部