- 继上次面试被打击后,开始啃基础书籍,这几天又看完了响应式web设计,看完了这本书对响应式设计理解的更加深入了,以前都是在网上碎片式的学习,有些地方懵懵懂懂的,还是要多看这些好的专业书,这样会学得更加全面,理解也更深入,接下来整理一下我的读书笔记。
从这本书中收货最多的是对响应式的理解,响应式不光是根据视口匹配不同的样式,还要考虑图片,文字,视频的在响应式布局中的优化。
媒体查询:支持不同的视口
1 . 媒体查询支持的特性
- width: 视口宽度;
- height: 视口高度;
- device-width: 设备屏幕的宽度;
- device-height: 设备屏幕的高度;
- orientation: 检查设备处于横向还是纵向;
- aspect-ratio:基于视口宽度和高度的宽高比;16/9
- device-aspect-ratio:渲染平面高度的宽高比;
- color:每种颜色的位数
- color-index 设备的颜色索引表中的颜色数
- 等等等等——-;
2 .由于css的层叠特性,我们可以在样式表的开头设置基本样式,然后使用媒体查询来进一步重写这部分样式,将不同的媒体查询的样式保存在独立文件中没有太大好处(会增加用于页面渲染的HTTP请求数量)Respond.js是为IE8及更低版本增加媒体查询支持的最快js工具
3 .阻止浏览器自动调整页面大小,ios和android都基于webkit核心,可使用 meta中的viewport覆盖默认的画布缩放设置。
<meta name="viewport" content="initial-scale=1.0, width=device-width, user-scalable=no" /">
4 .在响应式设计中要坚决贯彻“内容优先”的原则,将内容区域移到导航区域之上。
拥抱流式布局
1 .仅使用媒体查询时,在视口变化时会发生样式的突变,为避免这种情况,最好使用流式布局,即百分比布局。我们所要做的就是将固定布局修改为半分比布局,即将固定尺寸修改为相对尺寸;
公式如下:半分比宽度=目标元素宽度/上下文元素宽度
- 对于字体用em替换px
- 对于图片除了宽高设置为百分比,可以为弹性图片设置阈值,避免视口拉大,使超出图片原始尺寸
max-width:200px;
- 对最外层的wrap元素也可设置max-width属性,限制页面的无限扩张
2 .为不同的屏幕尺寸提供不同的图片
- 流式布局中,图片尺寸必须比显示的尺寸大以保证渲染效果,所以图片文件的体积就永远比实际所需的大,使用“自适应图片”根据屏幕尺寸提供完全不同的图片,为没必要下载全尺寸大图的设备节省带宽。见本书的73页。
- 媒体查询约束流动布局的变动范围,而流动布局则简化了从一组媒体查询样式过渡到另一组的改变过程。
3 .响应式视频
- 在h5的video标签中删除其中的height和width属性,在css中追加以下代码
vidio{max-width:100%;height:auto;}
- 若使用iframe嵌入的视频上述解决方法就不行了,可以使用FitVids的jQuery小插件。本书111页
响应式中的h5
1 .腻子脚本
- 腻子脚本指一段能给老版本浏览器带来新特性的js代码。
- Modernizr除了能让IE支持h5新元素,还能基于一系列特性测试来有条件的加载更高级的腻子脚本(polyfill),css文件及额外的js文件。
2 .遵循WAI-ARIA实现无障碍站点
- WAI-ARIA指无障碍网页应用技术,它主要解决一个问题:让残障人士能无障碍的访问网页上的动态内容。
- ARIA的地标角色,在标签中加入
role='navigation
等,有如下的地标角色:
- application(用来定义用作网页应用的区域)
- banner(用来定义一个站点级别的区域,如网站的头部和logo)
- complementary(用来定义一个队主要区域进行补充说明的区域)
- contentinfo(用来定义与主要内容相关的信息区域,例如页脚的网站版权信息区域)
- form 表单
- main 主要内容区域
- navigation 导航链接
- searth 用来定义一个用于搜索的区域
3 .标题模糊怎么办
- 使用@font-face字体会发生标题模糊,解决办法是始终为应用了@font-face字体的元素设定font-weight属性;
用css3创造令人惊艳的美
1 .文字阴影(现在所有浏览器及ie9之后的IE均支持)
text-shadow
2 .盒阴影(浏览器的支持效果不是很好,最好使用私有前缀)box-shadow
3.制作完美css3渐变的简洁方法css3渐变
4 .背景渐变图案常熟市渐变图案
5 .变形傻瓜化的矩阵变形工具
用H5和css3征服表单
1 .required 建议额外添加
aria-required="true"
方便屏幕阅读器用户
2 .autofocus,使用该属性要小心,如果有多个表单域都被追加了该属性,会造成跨浏览器混乱,Chrome会聚焦最后一个使用autofocus属性的表单域,而firefox(v9)恰恰相反
3 .H5的新输入类型有
emailnumber,url,tel,searth,pattern,color,date,month,week,time,datetime,datetime-local,range(滑动条)
4 .给不支持新特性的浏览器打补丁:webshims Lib构建于modernizr和jquery之上,能做到只加载实际需要的补丁
解决跨浏览器问题
1 .在多个浏览器中测试网站,通常标准浏览器chrome,safari,firefox在渲染H5和css3效果基本一致,ie的个版本会有差距,可使用IE Tester工具
2 .使用modernizr按需加载资源,respond.js,IE条件注释
3 .必要时将导航链接变为下拉菜单(渐进增强)
4 .考虑高分辨率设备由于最近在恶补H5和css3的基础知识,看了很多书,发现有很多地方都很相似,所以我只总结了我认为的这本书值得让我再回味的知识点!
响应式web设计——读书笔记
最新推荐文章于 2024-08-22 06:02:10 发布