TAT.Minren 响应式设计
In CSS3,HTML5,Web开发,移动 Web 开发 on 2014年01月23日 by view: 27,750
9

网上的教程好复杂,我写一个简版的。

简单说呢就针对不同的屏幕分辨率应用不同的CSS样式。比如在电脑、Pad设备上,屏幕比较宽,就可以一行放2个Div。
到了手机上,或者Pad竖着拿的的时候,一行就只放1个Div。
这里有2个关键点:
一是如何在不修改Dom结构的前提下调整布局。
二是如何判断屏幕分辨率并应用对应的CSS。
以上两点都应该不依赖与JS。
实现第一点依靠的是流式布局。就是所有参与布局的DIV都用float:left,宽度都用百分比表示。比如下图,黄色部分的宽度是60%,橘色宽度是40%。
宽
如果将黄色和橘色的宽度都width=100%,那么从1行变成2行了,如下图。从而实现不修改Dom实现布局变化。
窄
那么如何不使用JS而实现动态调整CSS样式就是第二个关键点。
HTML5中提供了一种新的CSS语法——@media,学名是Media Query,可以为不同的分辨率设定不同的样式。

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

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

这段语句就是针对iPhone横屏的。即,浏览器宽度在321-480像素之间,且方向是“横向”时生效。

不过自从Retina这中妖艳的屏幕推出,分辨率已经不能代表世界的真相了。小小的Note3的分辨率比一些17“显示的分辨率还高。
所以还有必要判断一下设备的像素密度-device-pixel-ratio。
比如上面的语句就是判断终端的像素比是2的话,所渲染的样式。可以适用于iPhone4,iPhone5等设备。
除了上述两点,还需要在页面上增加一个viewport的meta标签,否则在手机上可能会有页面自动缩放的情况。例如:
总结一下:响应式布局有三个关键点:
1、流式布局 Liquid Layout
2、Media Query
3、viewport
具体细节就请大家自己研究相关的语法了。
Media Query的语法比较复杂,这里个大家推荐一个工具,可以方便的设计布局,并可以针对各种设备自动生成Media Query的语句:
http://www.responsivewebcss.com/

原创文章转载请注明:

转载自AlloyTeam:http://www.alloyteam.com/2014/01/responsive-design/

  1. 李白 2017 年 3 月 30 日

    找外包,想要稳定靠谱、费用还低的外包商?难!
    怕被坑?上空心www.kxhtml.com 一家100元/页的软件开发云平台!
    在招人,海招海筛、培训,到头来上手还是慢!
    用结果打脸!上空心www.kxhtml.com 一家先看开发结果后付费的平台!
    想创业,有idea?到处找CTO?技术难关攻不破?
    立即上线!上空心www.kxhtml.com 一家开发神速火箭般输出页面的平台!

  2. 简单的完成Web响应式设计 – 设计笔记 2017 年 1 月 5 日

    […] 本文转载自腾讯AlloyTeam团队 […]

  3. 狼子野心 2016 年 3 月 8 日

    搜哪儿 - [搜 索 从 这 里 开 始] , 如果喜欢请设置为首页或按“CTRL+D“添加收藏。
    http://www.naerweb.com; http://so.naerweb.com

    搜哪儿是中国最具权威的搜索引擎大全,为用户提供方便、快捷的网页、新闻、图片、视频、音乐、购物、地图、游戏、小说、微博、词典、翻译等搜索服务。

  4. 简单的完成Web响应式设计 - 设计笔记 2015 年 11 月 8 日

    […] 本文转载自腾讯AlloyTeam团队 […]

  5. 响应式设计经验分享-喵喵先森 2015 年 3 月 24 日

    […] 转载自:AlloyTeam […]

  6. deep 2014 年 2 月 25 日

    Yahoo小组推出的purecss响应式框架完全杜绝了float,也是一种不错的思维模式。

    • Billgo 2014 年 6 月 12 日

      据我了解,purecss的制约性还是挺大的,我把它的代码拆开来阅读了好几次,最后把它跟yaml这个框架去比较,觉得完全杜绝float不是很可取,如果真要这样倒不如用flex这个css3的属性来做布局。

  7. xloger 2014 年 2 月 7 日

    这个代码插件好喜欢。。。。请问下叫什么名字?

发表评论