Responsive

基于CSS搭建一个响应式网站

几乎每个人都在讨论响应式设计,但是我不敢确定每个人都理解他是用来做什么的?许多web设计者开发者希望我能解决这些存在的误解,而我也在尝试这么做。简单来说,响应式设计不是专门为手机做网站,而是为了使网站布局适应多种设备大小设计的。

这篇文章由D姐根据Jason Michael的英文文章原名《Build a basic responsive site with CSS》进行翻译,在这篇文章里,将给你展现响应式设计背后的细节原则,所以我们需要真正理解这些原则。一旦我们理解了他,就可以在大屏幕小屏幕设备上,完美的呈现一个网站了。

iPads和iPhones的Media Queries

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

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

响应式导航菜单在移动端的制作方法与解决方案

Responsive设计现在是网页设计中的一种趋势,现在浏览网页不在是仅限于PC端,而是有很多类型的屏幕尺寸——桌面、笔记本电脑、平板电脑和智能手机等等。一个网页要能在这么多种类型屏幕上显示,Responsive设计似乎是一种完美的解决方案。因为他允许你创建一个网站,可以适应不同的分辨率。这是具有挑战性的,从桌面到移动端屏幕。为此,内容有需要隐藏的,图片必须能自动适应大小和一些其他网页元素需要相应的改变。详细的介绍可以阅读前面介绍的《Responsive Web Design》和《Responsive设计的十个基本技巧》。在这里,我们要看看网页设计中至关重要的UI组件之一网站导航菜单。因为导航也涉及到响应式设计的变化。

解决方案有许多种,比如说使用选择下拉框制作菜单、CSS下拉菜单、切换导航菜单等,(可以看看《20款Responsive Menu教程》,这里有近20种响应式导航菜单制作案例与相关教程的介绍)。当然这些解决方案都有自己的优缺点,至于使用哪种解决方案,就需要根据您的需求,从中找到一个完美的解决方案来适合你的项目。接下来为大家提供一些响应式导航菜单的制作方法和解决方案,希望能帮你完成更好的Responsive设计。

Responsive列布局

布局W3cplus说的也比较多了,但Responsive的列布局还是第一回说,(如果你是第一次听说Responsive这个词,建议你点击和先了解Responsive)。今天看到一篇有关于Responsive的列布局教程,觉得值得一读,将其译成中文,希望对有需要的同学有所帮助。

通常我们进行列布局,都需要在第一列添加一个类名“first”,在最后一列添加一个类名“last”,主要用来清除他们之间的margin,(有关这方面的介绍可以详细阅读为之写的《CSS解决方案》中的《项目列表解决方安》,这里详细介绍了类似于列布局的相关方法,或者点击这里了解如何避免重复列末尾的Margin。)而且还通过添加类名“clearfix”来清除浮动。这些都是比较古老的解决方案了,今天我们一起来看一个新方案,就是使用CSS3的伪元素选择器“nth-of-type”来实现一个简单的Responsive列布局效果。使用这种方法制作了一些WordPress主题模板。制作这些模板中,他没有使用“first”和“last”类名就实现了多列在不同设备下都能自适应,换句话说,他就是能实现四列、三列、两列等等之间的切换。

Responsive Web Design

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

Responsive设计的十个基本技巧

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

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的响应式设计的兴起,前面跟大家一起学习了:

Responsive设计的关键三步

最近一直在学习这个Responsive设计相关知识点,前面我在本站陆续发布了与“Responsive”设计的相关教程:

了解Responsive网页设计的三个特性

页面

返回顶部