标签:
原书: 响应式Web设计实践
第2章 流动布局
1. 布局选项
媒体查询:
媒体查询允许根据设备的信息----诸如屏幕宽度, 方向或者分辨率等属性来使用不同的样式
断点:
那些被指定的,开始应用某一新的媒介查询的点. 例如, 一个在980px处的断点的意思是, 当浏览器宽度大于或小于这一数值时, 新的媒介查询将被触发
2. 字体大小
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" />
<meta name="viewport" content="height=device-height" />
<meta name="viewport" content="user-scalable=no" />
<meta name="viewport" content="initial-scale=.5, width=device-width" />
如这个例子中, width属性被设成设备的宽度, 同时initial-scale被设置为.5, 这意味着浏览器将会缩小显示所有东西: 例如在一个320px宽的设备上, 页面会显示为640px
2. 媒介查询结构
媒介查询可以通过问询浏览器来确定特定的表达式是否为真. 如果为真, 就加载一些特殊的, 适用于这种情况的样式, 从而达到调整布局的目的.
媒介查询的一般形式为:
@media [not|only] type [and] (expr) { rules }
包含四个基本组成部分:
1) 媒介类型:
每一种媒介类型都会告诉用户代理(例如浏览器)是否要加载特定的样式表. 例如, 如果知道screen媒介类型, 那么所有通过计算机显示器来浏览页面的用户代理都会加载相应的样式. 如果是print媒介类型, 那么相应的样式将会在打印或打印预览时进行加载.
十种类型:
all | 所有设备(默认) |
braille | 盲文触觉反馈设备 |
embossed | 分页盲文打印机 |
handeld | 手持设备(通常为小屏幕并且可能是黑白屏幕) |
打印或打印预览 | |
projection | 投影仪 |
screen | 彩色计算机屏幕 |
speech | 语言合成器 |
tty | 使用固定字符间距的设备(终端或打印设备) |
tv | 电视机 |
样式中的查询语句如下:
@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-前缀也都适用于这些特性
特性 | 描述 | 值 | 可以指定最小或最大 |
width | 描述设备显示区域的宽度 | <长度>(例如320) | 是 |
height | 描述设备显示区域的高度 | <长度>(例如600) | 是 |
device-width | 描述设备渲染界面的宽度 | <长度>(例如320) | 是 |
device-height | 描述设备渲染界面的高度 | <长度>(例如600) | 是 |
orientation | 指定设备处于竖直(高度大于宽度)或者水平(宽度大于高度)状态 | portrait | landscape | 否 |
aspect-ratio | width属性和height属性的比值 | <比值>(例如16/9) | 是 |
device-aspect-ratio | device-width属性和device-height属性的比值 | <比值>(例如16/9) | 是 |
color | 设备的每个颜色分量的比特数 | <整数>(例如1) | 是 |
color-index | 设备的颜色查找表中的条目数 | <整数>(例如256) | 是 |
monochrome | 黑白屏幕设备每个像素的比特数(如果不是黑白屏幕将返回0) | <整数>(例如8) | 是 |
resolution | 设备的分辨率(像素密度), 可以以点每英尺[dpi]或者点每厘米[dpcm]来表示 | <分辨率>(例如118dpcm> | 是 |
scan | "tv"类设备的扫描过程 | progressive | interlace | 否 |
grid | 返回该设备是网格设备(1)还是位图设备(0) | <整数>(例如1) | 否 |
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属性被包含到页面中去.
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. 导航栏
标签:
原文地址:http://www.cnblogs.com/haoyijing/p/5824183.html