简单的完成Web响应式设计

/ 41评 / 3

响应式简单说呢就针对不同的屏幕分辨率应用不同的CSS样式。比如在电脑、Pad设备上,屏幕比较宽,就可以一行放2个Div。

到了手机上,或者Pad竖着拿的的时候,一行就只放1个Div。

这里有2个关键点:

一是如何在不修改Dom结构的前提下调整布局。

二是如何判断屏幕分辨率并应用对应的CSS。

以上两点都应该不依赖与JS。

实现第一点依靠的是流式布局。就是所有参与布局的DIV都用float:left,宽度都用百分比表示。比如下图,黄色部分的宽度是60%,橘色宽度是40%。

1

如果将黄色和橘色的宽度都width=100%,那么从1行变成2行了,如下图。从而实现不修改Dom实现布局变化。

2

那么如何不使用JS而实现动态调整CSS样式就是第二个关键点。 HTML5中提供了一种新的CSS语法——@media,学名是Media Query,可以为不同的分辨率设定不同的样式。

/* Phone Portrait (320px) */
@media only screen and (max-width: 320px) {
#head { width: 100%; }
#main { width: 100%; }
#foot { width: 100%; }
#left { width: 100%; }
#right { width: 100%; }
}

上面这段代码的含义就是当屏幕宽度小于等于320像素时应用大括号中的样式。下图是在CSS生效时在浏览器中的效果:

3

@media还有一些更复杂的用法,比如:

/* Phone Landscape (480px) */
@media only screen and (min-width: 321px) and (max-width: 480px) and (orientation: landscape) {
这段语句就是针对iPhone横屏的。即,浏览器宽度在321-480像素之间,且方向是“横向”时生效。
不过自从Retina这中妖艳的屏幕推出,分辨率已经不能代表世界的真相了。小小的Note3的分辨率比一些17“显示的分辨率还高。
所以还有必要判断一下设备的像素密度-device-pixel-ratio。 
}

@media only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2)

比如上面的语句就是判断终端的像素比是2的话,所渲染的样式。可以适用于iPhone4,iPhone5等设备。

除了上述两点,还需要在页面上增加一个viewport的meta标签,否则在手机上可能会有页面自动缩放的情况。例如:

<meta name="viewport" content="width=device-width; initial-scale=1.0">

总结一下:响应式布局有三个关键点:

  1. 流式布局 Liquid Layout
  2. Media Query
  3. viewport

具体细节就请大家自己研究相关的语法了。

Media Query的语法比较复杂,这里个大家推荐一个工具,可以方便的设计布局,并可以针对各种设备自动生成Media Query的语句: http://www.responsivewebcss.com/

本文转载自腾讯AlloyTeam团队

  1. 斌果说道:

    我评论竟然可以插入js

    alert(“你的能么?”);

  2. 小二苘说道:

    这太牛了

  3. 斌果说道:

    全站Ajax让我搞定了,虽然是假的,但也显得很屌有木有

  4. cervelo jersey说道:

    学编程的都是天才啊

  5. 斌果说道:

    还敢把图片弄得再大点么

  6. Dimpurr说道:

    CSS3 Media Query 响应式媒体查询
    以前没事也写过这么一篇 ……

  7. 微历史说道:

    据说现在流行根据浏览器、移动设备,网页能自动适应屏幕

  8. 碎碎念说道:

    电脑端,屏幕分辨率宽度320以下时,测试出文章标题文字溢出

  9. 神父说道:

    神父来占楼,药药药!!切克闹!!煎饼果子来一套!一个鸡蛋一块钱!喜欢脆的多放面!辣椒腐乳小葱花!铁板铁铲小木刷! 药药药!切克闹!! 放点面酱些许甜!趁热吃了似神仙!! 艾瑞巴蒂!黑喂狗!跟我一起来一套!动词大慈动词大慈!占楼时间:下午2:52:24

  10. 不会流式布局,就用Media Query和viewport把不需要的东西藏起来了

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注