12bet,的读书笔记

第四章 响应式网页设计

  • 媒体查询由一个媒体类型，零个或多个对某个特定媒体特征条件的查询表达式组成
  • 我们可以通过CSS调整图片大小。但用户不得不在移动设备上下载跟桌面浏览器上一样大小的图片
  • 一条移动端优化的宗旨：永远不要给你的用户发送任何一丁点非必要的数据
  • 可以在服务器端预先为没一张图片准备好不同尺寸的版本，然后根据用户设备发送响应版本的图片，具体做法是，在头部加入一个js文件来检测屏幕大小，然后根据屏幕大小去在head标签中插入base元素。但这种方法遇到不支持的浏览器时，会将两张图片都加载
  • 12bet,弹性栅格是由一定数量的列和列隙组成，理论上，页面的内容最好能在12个列宽内显示

第五章 理解页面重用机制

  • 12bet,需要将网站页面的内容抽象成组件，大量使用组件重用，提高开发效率
  • 12bet,在一个网页中，所有的东西从某种意义上说都可以被看做是“容器”，它们包含着其他一些子容器，同时也被父容器包含着，事实上，每个组件就是一个容器

第六章 页面模板

  • 12博体育,一些网站提供了结构良好的页面模板

  • 12博体育,可以通过条件注释的方式来解决IE浏览器兼容问题

    <!--[if lt IE 7]> <html class="ie6" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="ie7" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="ie8" lang="en"> <![endif]-->
<!--[if IE 9]> <html class="ie9" lang="en"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en"> <!--<![endif]-->

    这种方式通过IE特有的条件注释在html标签上加上了class，这样写css的时候就可以这么写了：

    .paddingDefinition {
  padding: 10px;
}
.ie7 .paddingDefinition {
  padding: 12px;
}
.ie8 .paddingDefinition {
  padding: 24px;
}

    这种方式的好处是，可以通过一个css文件解决IE的兼容问题，而且不需要hack，也不需要为每个版本的IE准备特定的CSS样式文件，节省了HTTP请求

  • 需要在HTML文档第一个meta标记中确定字符集，如果浏览器不确定应该使用哪个字符集，会自行根据内置算法进行分析和嗅探，这必然有额外的开销，延迟页面的渲染，并且还可能留下让攻击者欺骗浏览器将页面编码识别为UTF-7从而加以利用的后门

  • IE8开始提供了兼容模式，使用兼容模式时，浏览器检测不到支持的内容时会进行降级处理，用低版本浏览器的渲染方式去渲染。我们开发的时候不应当依赖兼容模式，它不是百分百可靠，不能够完全替代在各种浏览器上进行兼容性测试的工作。所以一般都要关闭兼容模式，可以使用meta标签进行关闭：
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    这里X-UA-Compatible告诉IE（IE8+）将要设置兼容模式状态，而content中IE=edge表示，浏览器不要采用兼容模式，而总是采用最新版本的规则去渲染。content中的chrome=1告诉IE如果用户安装了Google Chrome Frame插件，就是用它通过Chrome内核的渲染方式进行渲染
  • Google Chrome Frame是一个IE上的插件，能够使用Chrome引擎的框架，甚至能让IE6支持HTML5，但并不是所有用户都安装了GCF
  • 使用viewport来适配移动端<meta name="viewport" content="width=device-width">
  • 与样式表文件大小增加而产生的额外开销比起来，减少HTTP请求数对性能的改善更为明显

第七章 导航

  • 分类要清晰，还需要让用户能够轻松地找到网站提供的各种内容。导航不要和内容去抢用户眼球

菜单结构

菜单结构应当有如下特点：

  • 有意义：看到源代码时，能够明白各个元素（容器和内容）之间的关系
  • 可读：没有乱七八糟或者使用晦涩的类名称
  • 易被屏幕阅读器追踪（或者忽略）：有一个不会让视力受损用户浪费事件的菜单结构
  • 遵循渐进式设计目标：不会妨碍为各种浏览器提供尽可能好的展现

菜单结构有很多选择，无需列表最合适

后代节点选择器性能很差，因为CSS选择器引擎是从右往左解析的。含标识符的选择器性能会高很多，ID选择器性能最高，但比含标识符的选择器高的不多，但标识符可以重复使用。同时，后代选择器还会把CSS绑死到HTML代码上，而其他元素无法进行复用。所以应当使用含标识符的选择器而不是ID选择器，更不应该使用后代选择器。

给菜单添加样式

  • 试图让所有浏览器展示完全一样的效果是不对的。放弃对所有浏览器展示完全一样的效果换来了更高的开发效率，更少和更简单的代码，响应式设计选择，更快的页面加载（没有任何额外的HTTP请求）
  • 微软的filter性能很差，能不用就不用

base64编码

  • base64编码实际上就是将图片存储为一段字符的方法
  • 注意，HTML中添加base64编码图片，是不会被缓存的，但如果放在CSS中，会随着CSS文件一并缓存
  • 其获取与CSS文件或HTML文件一起，不需要一次HTTP请求，能获得一点性能提升
  • IE7-不支持base64编码图片

第八章 页头

  • 不要试图将所有东西（与核心内容无关的东西）都挤到页面头部，页头应该越简单越好
  • 在网页设计中，页头是放品牌Logo的地方，是用户对网站感官印象的起始点。页头通常还会包括一些重要的导航链接项
  • 对于品牌Logo，使用img而不用背景图更方便打印，浏览器不主动打印背景图，除非用户自己在打印选项里选择
  • 使用sprite减少HTTP请求数
  • 页头在每个页面都存在，性能不好的页头将是一个噩梦

第九章 页脚

  • 页脚通常用来放一些法律相关信息（版权信息和商标）和各个页面都有的公共内容
  • SVG基于XML语言，但IE9以下是不支持的。SVG允许制作可以缩放到任意尺寸的复杂图形。事实上，它只是描绘了各种图形和图形之间的关系。在SVG中，复杂的形状被渲染成一组简单形状的集合
  • 使用SVG能够减少HTTP请求，因为它包含在HTML代码中，同时SVG属于文本，能够享受GZIP带来的压缩效果。很多时候，同图片相比，使用SVG可以获得更好地性能
  • SVG能够通过JavaScript来提供交互

第十章 分型设计模式

可重用组件有如下好处:

  • 更快的开发页面
  • 更快的修复bug
  • 增强一致性
  • 更少的模式
  • 很高的接受度
  • 加强代码质量

后面所有

后面的不写了，不是我不愿记录了，而是后面都是一些组件编写，本质上都是从后台获取配置json然后拼接成HTML，同时大量的贴源码，意义并不是太大

12bet  网站地图  12博bet  12博娱乐