《响应式Web设计实践》学习笔记

原书: 响应式Web设计实践

第2章 流动布局

1. 布局选项

• 传统的固定布局中存在很多问题, 随着屏幕大小的越来越多元化, 固定布局已经不能适用了.
• 在流动布局中, 度量的单位不再是像素, 而是变成了百分比.
• 弹性布局与流动布局类似, 但是通常情况下, 弹性布局中会以em来作为单位. 带来一个好处是随着用户增大或减小字体, 适用弹性布局的元素的宽度也会等比例地变化. 但是其也可能出现水平滚动条
• 混合布局

　　媒体查询:

　　媒体查询允许根据设备的信息----诸如屏幕宽度, 方向或者分辨率等属性来使用不同的样式

　　断点:

　　那些被指定的,开始应用某一新的媒介查询的点. 例如, 一个在980px处的断点的意思是, 当浏览器宽度大于或小于这一数值时, 新的媒介查询将被触发

2. 字体大小

• 像素: 不够灵活
• em: 可缩放, 可级联
• 百分比: 可缩放, 可级联
• rem(root em): rem的大小与根元素---html元素有关. 移动平台尚不支持

3. 网格布局

• 一个流动布局的实现:

      #container{
          width: 95%;
          padding: .625em 1.05% 1.5em;  /*10px/16px 10px/948px 24px/16px*/
          margin: auto 0;
      }
      .main{
          float: left;
          margin-right: 2.53%; /* 24/948 */
          width: 65.823%; /*624/948*/
      }
      .aside{
          float: right;
          width: 31.645%;  /*300/948 */
      }

• 流动世界中的固定宽度对象: 图片

      aside img,
      .main img,
      .slats img{
          width:100%;
          max-width: 100%;
      }

  不可以在html中定义img的height和width的属性值, 如果设定了这些值, 就不能按比例缩放图片了.

4. 混合固定宽度和流动宽度
　　目的: 固定右边边栏, 只让主栏流动
　　方法: 使用表格布局

    .main{
        display: table-cell;
        padding-right: 2.53%;   /* 24/948 */
    }
    aside{
        display: table-cell;
        width: 300px;
    }

　　使用条件注释来为IE 7 及以下版本的IE浏览器提供备用样式: (!IEMobile的条件判断是因为Windows Phone 7 也会加载这个备用样式)

<!--[if (lt Ie 8) & (!IEMobile)]>
<link rel="stylesheet" type="text/css" href="css/ie.css" media="all">
<![endif]-->

第3章 媒介查询

1. 视口

　　在移动设备上, 很多设备都会给浏览器返回一个数值较大的布局视口.

　　视口标签:

<meta name="viewport" content="directive, directive" />

　　视口的属性:

• width: 可以将视口设置为某一特定的宽度, 或者设置为设备屏幕的宽度
  最佳选择是在width声明中使用device-width

  <meta name="viewport" content="width=device-width" />

• height: 允许指定一个特定的高度. 最好将布局视口的高度等于屏幕的高度. 
  但是一般不会经常用到height, height有用时候就是在不想让页面垂直滚动的时候

  <meta name="viewport" content="height=device-height" />

• user-scalable: 告诉浏览器是否允许用户在页面上进行缩放. 默认值是yes, 即运行缩放

  <meta name="viewport" content="user-scalable=no" />

• initial-scale: 可以通过给这个参数赋值为0.1(10%)到10.0(1000%)之间的某个数来设置页面初始化时的缩放层级

  <meta name="viewport" content="initial-scale=.5, width=device-width" />

  如这个例子中, width属性被设成设备的宽度, 同时initial-scale被设置为.5, 这意味着浏览器将会缩小显示所有东西: 例如在一个320px宽的设备上, 页面会显示为640px

• maximum-scale: 浏览器允许用户放大页面到什么程度. 在移动端Safari中, 其默认值是1.6(160%), 可以指定0.1-10.0. 如果将其设为1.0, 则意味着禁止用户缩放页面
• minimum-scale: 告之浏览器允许用户将页面缩小到什么程度. 在移动端Safari中, 其默认值是0.25, 可指定0.1-10.0. 如果将其设为1.0, 则意味着禁止用户缩小页面

2. 媒介查询结构

　　媒介查询可以通过问询浏览器来确定特定的表达式是否为真. 如果为真, 就加载一些特殊的, 适用于这种情况的样式, 从而达到调整布局的目的.

　　媒介查询的一般形式为:

@media [not|only] type [and] (expr) {
    rules
}

　　包含四个基本组成部分：

• 媒介类型：　特定的目标设备类型
• 媒介表达式：　测试某一特性是否为真
• 逻辑关键词：　可以用关键词（例如 and, or, not, only) 来创建出更多复杂的表达式
• 规则：　调整显示效果的基本样式

１) 媒介类型:

　　每一种媒介类型都会告诉用户代理(例如浏览器)是否要加载特定的样式表. 例如, 如果知道screen媒介类型, 那么所有通过计算机显示器来浏览页面的用户代理都会加载相应的样式. 如果是print媒介类型, 那么相应的样式将会在打印或打印预览时进行加载.

　　十种类型:

　　样式中的查询语句如下:

@media print {
}

　　也可以采用外部样式文件的形式, 并在link元素内指定媒介属性:

<link rel="stylesheet" href="print.css" media="print" />

　　无论哪种方法, 被引用的CSS的效果只有在打印或打印预览时才能看到.

　　每条媒介查询都必须包含一种媒介类型,如果没有设置媒介类型, 该条查询将使用默认值all, 但在不同浏览器中的实际行为是各不相同的.

2) 媒介表达式

　　判断设备视口的宽度是否大于320px:

@media screen and (min-width: 320px){
}

　　先检测访问页面的设备是否属于screen, 然后测试设备的视口宽度----宽度至少为320px

　　可以使用的媒介特性, 并且min-和max-前缀也都适用于这些特性

3) 逻辑关键词

@media screen and (color) {}      /*判断设备是否配备有彩色屏幕*/

@media not screen and (color){}    /*等于 not (screen and (color))*/

@media screen and (color), projection and (color)   /*逗号表示or */

/*很多浏览器支持媒介类型, 但不支持媒介查询, 有时这会导致浏览器去尝试下载那些你不希望用户看到的样式. 这时候就可以用only关键字, 对那些较老浏览器隐藏媒介查询, 这样它们就并不会识别出相应的样式了. 而支持only关键字的浏览器则会继续处理带有only关键字的查询语句*/
@media only screen and (color)  /* 如果设备不支持媒介查询, 那么它将会忽略这条查询. 如果设备支持媒介查询, 那么设备将会将上面这条查询与下面这条查询等效对待
@media screen and (color)

3. 内嵌样式与外部样式

　　媒介查询既可以写在页面内部, 也可以通过link元素的media属性被包含到页面中去.

• 内嵌式媒介查询:
  • 优点: 只需要一个http请求
  • 缺点: 所有样式都会被下载, 不论是否用到. 而且单个css文件会变得很大
• 外部媒介查询
  • 不论是否会用到, 其实也会下载所有的样式. 目的在于, 如果浏览器的窗口的大小或者方向发生了改变, 它的各自样式已经各就各位了
  • 优点: 文件变得很小, 利于维护

4. 媒介查询顺序

• 从桌面端向下设计

  • @media all and (max-width: 768px){
    }
    @media all and (max-width: 320px){
    }

  • 缺点: 移动设备对媒介查询的支持不够完善
• 从移动端向上设计

  • @media all and (min-width: 320px){
    }
    @media all and (min-width: 768px){
    }

  • 能获得浏览器更好的支持,
  • 且可以降低css文件的复杂性

5. 创建核心体验

6. 确定断点

　　传统的做法: 使用一些固定的标准宽度: 320px(iphone和其他一些设备), 768px(ipad)和1024px

　　存在的问题是: 可能会忽视在这些宽度之间的设备.

　　1) 更好的做法是 追随内容:

　　根据内容来决定应该在哪里设置断点以及需要设置多少个断点.

　　其实就是缩放浏览器, 然后缓慢拉宽窗口直到有些东西需要调整时设置断点.

　　2) 增加对大屏幕的支持.

　　3) 使用em为媒体查询增加灵活性

　　即使用em为单位来设置断点

7. 导航栏

1. 什么都不做
2. 转换为下拉列表
3. 切换式菜单