《响应式Web设计-HTML5和CSS3实战》阅读笔记第三章
2017-03-24 10:22
387 查看
概要
总结
固定布局禁不起考验基于已知的视口宽度布局无法兼容未来发展,我们需要适应未知设备的方法
为什么响应式设计需要百分比布局
只使用媒体查询来适应不同视口的固定宽度设计的话没有任何平滑渐变,将固定宽度转化为百分比可以使页面元素根据视口大小灵活伸缩修正样式。
使用百分比布局创建流动的弹性页面,同时使用媒体查询来限制元素的变动范围。
将网页从固定布局修改为百分比布局
像素与百分比切换公式:
目标元素宽度/上下文元素宽度=百分比宽度,设置百分比元素的上下文
弹性图片
将图片宽度设置为百分比可以让图片随视口缩放,但是小视口会存在资源和性能问题
为特定图片指定特定规则百分比
给弹性图片设置阈值,即给图片设置最大或最小值,保证图片效果。max-width属性
为不同屏幕尺寸提供不同的图片
Filament Group响应式图片
Adaptive Images自适应图片。需要安装PHP5.*、Apache 2,不需要缩放的图片单独放一个文件夹,并在.htaccess中配置
扩展,响应式图片的3种解决方案
流动网格布局和媒体查询的默契配合
媒体查询约束流动布局的范围,流动布局简化媒体查询不同样式之间过渡的过程
CSS网格系统
支持响应式设计的CSS框架,快速搭建项目
Columnal : http://www.columnal.com
bootstrap : http://www.bootcss.com/
Semantic : http://semantic.gs
Skeleton : http://getskeleton.com
1140 CSS Grid : http://cssgrid.net
相关文章推荐
- 《响应式Web设计-HTML5和CSS3实战》阅读笔记第五章
- 《响应式Web设计-HTML5和CSS3实战》阅读笔记第四章
- 《响应式Web设计-HTML5和CSS3实战》阅读笔记第二章
- 《响应式Web设计-HTML5和CSS3实战》阅读笔记第一章
- 《响应式Web设计-HTML5和CSS3实战》阅读笔记第六章
- 一起来学习《响应式Web设计-HTML5和CSS3实战》吧
- ↗☻【响应式Web设计 HTML5和CSS3实战 #BOOK#】第2章 媒体查询:支持不同的视口
- ↗☻【响应式Web设计 HTML5和CSS3实战 #BOOK#】第4章 响应设计中的HTML5
- ↗☻【响应式Web设计 HTML5和CSS3实战 #BOOK#】第5章 CSS3:选择器、字体和颜色模式
- ↗☻【响应式Web设计 HTML5和CSS3实战 #BOOK#】第3章 拥抱流式布局
- 响应式web设计,html5和css3实战(@author Ben Fraim)
- 【响应式Web设计】读书笔记 - HTML5 表单(一) - 12
- ↗☻【响应式Web设计 HTML5和CSS3实战 #BOOK#】第1章 HTML5、CSS3及响应式设计入门
- 【笔记】web响应式设计:HTML5和CSS3实战 第一章~第三章
- 走向.NET架构设计—第三章—分层设计,初涉架构(后篇)
- 走向.NET架构设计―第三章―分层设计,初涉架构
- SQL SERVER设计与高级查询 第三章 学习笔记
- HTML5设计原理
- 互联网时代的软件革命—SaaS架构设计(第三章)
- HTML5 CSS3给网站设计带来出色效果