虽然标题说不用Media Queries，但我还是要在开头讲清楚，本文并不是要大家丢掉Media Queries，也不是要抨击Media Queries。Media Queries实际上非常有用，我在各种地方都会用到。但Media Queries并不能解决所有的自适应的设计问题

本文要解决的是根据元素所在的组件本身的大小来决定元素的排列，而不是整个视窗的宽高的问题

第一种. flex-wrap的Flexbox

Flex-wrap可以解决很多和容器大小相关的自适应性问题。例如，如果有足够的空间，那就把两个元素并排陈列；如果没有足够空间，就把这两个元素上下排列

没有什么华丽的技巧，就是用了flex-wrap的Flexbox，非常完美。Flexbox可以用在很多种情况下，比如下面这个两列的情况，不过这个例子其实是我简化后的。核心部分其实非常简单

第二种. 神奇四剑客

使用width,min-width,max-width以及calc（也就是“神奇四剑客”）来创建一个基于分隔点(25em)的宽度变化解决方案，是Rémi Parmentier的点子。这最初是用来做自适应的邮件模板，然后就扩展到了平常的web页面，现在以及发展到，可以用来创建各种自适应的模块

这个方法在width是百分比的时候很有效，也就是元素宽度是所在容器宽度的百分比的时候有效。然后，calc函数将该值与所需的断点做减法，如果宽度值小于断点，那会得到一个非常大的正数，或者如果宽度值大于断点，那会得到一个非常大的负数，或者两者完全相等，得到零。但是有max-width 和min-width 对较大的正数或者负数进行封顶

这里，我们的断点设的是25em。字号是16px的话，就相当于400px。如果容器宽度在400px及以上，也就是大于或等于断点，该元素的宽度就是0了，(400 - 400 = 0) * 1000 = 0或者(400 - 401 = -1) * 1000 = -1000

像这样的情况，min-width就会生效，元素的宽度就会变成50%。然而，如果容器的宽度是399px或者更低（也就是比断点更小），那么这个元素的宽度就是个很大的正数：(400 - 399 = 1) * 1000 = 1000

这样的话，max-width就生效，最后的结果就是100%。下面这个图也许可以帮你理解这个逻辑

这里上面的图表示当断点距离400px小于容器宽度100%的时候，因为结果会是一个非常大的负值，所以就会取min-width的宽度，也就是父容器的50%

这里下面的图表示当断点距离400px大于容器宽度100%的时候，因为结果会是一个非常大的正值，所以就会取max-width的宽度，也就是父容器的100%

下面的几个demo使用了上面的这些技巧，通过不同的方式来切换元素的宽度以适应其容器宽度

2.1 浮动图片：整体和部分的宽度处理

这个例子里，我会使用神奇四剑客和float属性，阐述如何根据断点确定容器的宽度来切换图片显示的方法(图片占容器的所有宽度和容器的部分宽度的方法)

这里当屏幕大于等于40em的时候，添加md-50类的div的最大宽度是50%，而如果屏幕小于40em的时候就不再遵循这个css样式

然后计算图片容器div所占据的宽度，因为图片已经100%充满图片容器，所以图片容器到底占据屏幕的一半还是全部就成为图片是怎么展示的关键了，这里当大于断点的时候就会取最大值max-width–100%，也就是占据屏幕展示区域的全部，所以此时图片就在全部的展示区域内显示，而如果小于断点的时候就会取最小值min-width–50%，也就是图片占据屏幕展示区域的一半显示

这里首页展示区域大于等于40em，所以div的宽度是展示区域的50%，而图片容器小于断点，所以取min-wdith占据展示区域的一半

这里首页展示区域小于40em，所以div的宽度是展示区域的100%，而图片容器大于断点，所以取max-wdith占据展示区域的全部

这里就是根据外部容器不同的宽度来决定内部图片是怎么排列的

2.2 浮动图片的显示和隐藏

接着上面的例子，我改了一下计算逻辑，去掉了min-width，好做一个开关。这个方法在容器宽度较小时可以有效节省可用空间

当小于25em的时候，width变成0或者负值，那么图片容器便会消失

这里也是根据外部容器的变化来决定内部图片是展示还是隐藏的效果

2.3 文字和图片：覆盖和堆叠

和前例的代码相似，不过我又额外增加了一个div来把文字覆盖到图片上，但如果图片过小，那么反而文字会让图片不清晰，这时就把文字排放在图片下。这个技巧有些复杂，所以我在这解释一下

这里，负的margin会把文字的位置上移，好让它能够覆盖图片区域。随着容器宽度变小，我需要让它消失，否则它就会覆盖图片，但由于此时没有min/max-width的属性限制，我们就不能用神奇四剑客的方法做到这一点

不过好在有另一种方法，如果padding是百分比数值，那么它就是容器宽度的百分比，而padding-top和padding-bottom都会影响元素的高度，这样就能通过容器宽度的变化达到间接控制容器高度的办法。了解这一点以后，我们就可以创造一个根据容器宽度变化而变化的padding-bottom

padding-bottom:calc((30em - 100%) * 1000)

我们不能给这个.pull 的div直接使用min/max-padding的类似方法，因为没有这样的属性；正确的做法是设法给这个padding加一个开关，这个开关是通过增加一个伪元素并控制这个伪元素的高度实现的，当宽度变化到30em的时候这里padding-bottom就变成了0，那么伪元素就不存在了，伪元素不存在那么pull这个div也就不存在了

这里展示了根据外部容器的变化来决定内部文字容器是怎么覆盖图片的

CSS之不使用Media Queries的自适应CSS相关推荐

html调用媒体图标,关于CSS 媒体查询（media queries）
传统的CSS只支持数量有限的设备显示规则,如:all.screen.print.handheld.television和projector.这些对于设备的尺寸.方向或分辨率没有任何的定论.CSS2.1 ...
定义css设备类型-Media Queries图表简介及使用方法
移动时代是任何网页设计师和开发者不可忽略的一个时代,现在我设计的页面有时会在电脑大屏幕上或者移动小屏幕上显示.如何让同一个网站同时适应完全不同尺寸的屏幕,CSS3完美地解决了这些问题.在CSS2.1版 ...
定义css设备类型-Media Queries
移动时代是任何网页设计师和开发者不可忽略的一个时代,现在我设计的页面有时会在电脑大屏幕上或者移动小屏幕上显示.如何让同一个网站同时适应完全不同尺寸的屏幕,CSS3完美地解决了这些问题.在CSS2.1版 ...
移动端zepot媒体查询media queries
使用zepot做轮播图 <head> <meta charset="utf-8"> <meta name="viewport" c ...
CSS3 Media Queries 详细介绍与使用方法，Responsive Web Design 必备技术, 响应式设计
上一篇我们介绍了Responsive Web Design之后,这次要来详细介绍CSS3 Media Queries了. 在上一篇中,我们提到Responsive Web Desig n的实作方式有大 ...
fluid mask 3_CSS3 Fluid Layout和Media Queries：一种响应式Web设计的简单方法
fluid mask 3 您是Web开发的初学者吗? 您是否希望在不学习任何框架的情况下使网页具有响应能力? 您是否曾被指示要在没有任何框架的情况下使页面具有响应性? 让我们面对现实吧,从事Web开发 ...
CSS3 Media Queries 实现网页自适应
文章转载自:爱思资源网http://www.aseoe.com/show-10-261-1.html 导语接下来会展示如何运用 HTML5 和 CSS3 来设计一个自适应网页.当今银屏分辨率从 32 ...
【原】YUI压缩与CSS media queries下的bug
大概是上个月,使用YUI压缩一个css文件后,发现只要是被压缩后的css文件有部分根本无法工作,一直都不知啥问题引起的,让我感到头疼. 今天发现了只要是在媒体查询中的样式无法起作用,于是才开始怀疑是m ...
CSS之Responsive设计和CSS3 Media Queries的结合
随着高科技的发展,现在我们浏览网页不在局限于PC机上了,用户可使用上网的设备是越来越多的品种:手机.小笔记本.iPad.Playbook,以及PC机,而且PC机的显展大小各不一致.这样一来不同的屏幕分 ...

CSS之不使用Media Queries的自适应CSS

虽然标题说不用Media Queries，但我还是要在开头讲清楚，本文并不是要大家丢掉Media Queries，也不是要抨击Media Queries。Media Queries实际上非常有用，我在各种地方都会用到。但Media Queries并不能解决所有的自适应的设计问题

本文要解决的是根据元素所在的组件本身的大小来决定元素的排列，而不是整个视窗的宽高的问题

第一种. flex-wrap的Flexbox

Flex-wrap可以解决很多和容器大小相关的自适应性问题。例如，如果有足够的空间，那就把两个元素并排陈列；如果没有足够空间，就把这两个元素上下排列

没有什么华丽的技巧，就是用了flex-wrap的Flexbox，非常完美。Flexbox可以用在很多种情况下，比如下面这个两列的情况，不过这个例子其实是我简化后的。核心部分其实非常简单

第二种. 神奇四剑客

这里，我们的断点设的是25em。字号是16px的话，就相当于400px。如果容器宽度在400px及以上，也就是大于或等于断点，该元素的宽度就是0了，(400 - 400 = 0) * 1000 = 0或者(400 - 401 = -1) * 1000 = -1000

像这样的情况，min-width就会生效，元素的宽度就会变成50%。然而，如果容器的宽度是399px或者更低（也就是比断点更小），那么这个元素的宽度就是个很大的正数：(400 - 399 = 1) * 1000 = 1000

这样的话，max-width就生效，最后的结果就是100%。下面这个图也许可以帮你理解这个逻辑

这里上面的图表示当断点距离400px小于容器宽度100%的时候，因为结果会是一个非常大的负值，所以就会取min-width的宽度，也就是父容器的50%

这里下面的图表示当断点距离400px大于容器宽度100%的时候，因为结果会是一个非常大的正值，所以就会取max-width的宽度，也就是父容器的100%

下面的几个demo使用了上面的这些技巧，通过不同的方式来切换元素的宽度以适应其容器宽度

2.1 浮动图片：整体和部分的宽度处理

这个例子里，我会使用神奇四剑客和float属性，阐述如何根据断点确定容器的宽度来切换图片显示的方法(图片占容器的所有宽度和容器的部分宽度的方法)

这里当屏幕大于等于40em的时候，添加md-50类的div的最大宽度是50%，而如果屏幕小于40em的时候就不再遵循这个css样式

这里首页展示区域大于等于40em，所以div的宽度是展示区域的50%，而图片容器小于断点，所以取min-wdith占据展示区域的一半

这里首页展示区域小于40em，所以div的宽度是展示区域的100%，而图片容器大于断点，所以取max-wdith占据展示区域的全部

这里就是根据外部容器不同的宽度来决定内部图片是怎么排列的

2.2 浮动图片的显示和隐藏

接着上面的例子，我改了一下计算逻辑，去掉了min-width，好做一个开关。这个方法在容器宽度较小时可以有效节省可用空间

当小于25em的时候，width变成0或者负值，那么图片容器便会消失

这里也是根据外部容器的变化来决定内部图片是展示还是隐藏的效果

2.3 文字和图片：覆盖和堆叠

和前例的代码相似，不过我又额外增加了一个div来把文字覆盖到图片上，但如果图片过小，那么反而文字会让图片不清晰，这时就把文字排放在图片下。这个技巧有些复杂，所以我在这解释一下

这里，负的margin会把文字的位置上移，好让它能够覆盖图片区域。随着容器宽度变小，我需要让它消失，否则它就会覆盖图片，但由于此时没有min/max-width的属性限制，我们就不能用神奇四剑客的方法做到这一点

padding-bottom:calc((30em - 100%) * 1000)

这里展示了根据外部容器的变化来决定内部文字容器是怎么覆盖图片的

CSS之不使用Media Queries的自适应CSS相关推荐

最新文章

热门文章