响应式web设计——读书笔记

• 继上次面试被打击后，开始啃基础书籍，这几天又看完了响应式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的基础知识，看了很多书，发现有很多地方都很相似，所以我只总结了我认为的这本书值得让我再回味的知识点！