首页 > 代码库 > 8.3心得
8.3心得
网页怎样在分辨率不同的电脑上全屏显示
例子：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>实现两边固定宽度,中间自适应宽度-</title>
<style>
body{ margin:0; padding:10px;}
#head{ margin-bottom:10px; height:50px; background-color:#999999}
#main{}
#left{ width:200px; float:left;margin-right:-200px; background-color:#FF9900}
#mid{ width:auto;background:#00FF00;margin:0 220px;border:1px solid #000;}
#right{ width:200px;margin-left:-200px; float:right; background-color:#CCCC00}
#foot{ margin-top:10px; clear:both; height:50px; background-color:#CCCCCC}
</style>
</head>
<body>
<div id="head">我是头部</div>
<div id="main">
<div id="left">我是左边,宽:200px</div>
<div id="right">我是右边,宽:200px</div>
<div id="mid">我是中间,宽自适应</div>
</div>
<div id="foot">我是底部</div>
</body>
</html>
FF和IE7调试通过,别的没测,
特别强调注意样式里的数字准确性,和HTML中调用时注意把是:左右中
什么是闭包
闭包就是能够读取其他函数内部变量的函数。闭包可以简单理解成“定义在一个函数内部的函数“。
所以，在本质上，闭包是将函数内部和函数外部连接起来的桥梁。
所谓“闭包”，指的是一个拥有许多变量和绑定了这些变量的环境的表达式（通常是一个函数），因而
这些变量也是该表达式的一部分。
例子：
function a(){
var i=0;
function b(){
alert(++i);
}
return b;
}
var c = a();
c();
两个特点：
1、函数b嵌套在函数a内部；
2、函数a返回函数b。
百分比
百分比是一种表达比例，比率或分数数值的方法
实 质 一种表达比例，分数数值的方法
应 用 百分数在生活中无处不在
定 义 以100为分母的分数称为百分数
注意点 百分比后面不能接单位
意义
表示一个数是另一个数的百分之几的数叫百分数。百分数也叫做百分率或百分比，通常不写成分数的形
式，而采用百分号（%）来表示。如41%，1%等。由于百分数的分母都是100，也就是都以1%作单位，因此
便于比较。百分数只表示两个数的关系，所以百分号后不可以加单位。
响应式
响应式网站设计是一种网络页面设计布局，其理念是：集中创建页面的图片排版大小，可以智能地根据
用户行为以及使用的设备环境进行相对应的布局。
响应式网站设计(Responsive Web design)的理念是：
页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应
和调整。具体的实践方式由多方面组成，包括弹性网格和布局、图片、CSS media query的使用等。无论
用户正在使用笔记本还是iPad，我们的页面都应该能够自动切换分辨率、图片尺寸及相关脚本功能等，
以适应不同设备；换句话说，页面应该有能力去自动响应用户的设备环境。响应式网页设计就是一个网
站能够兼容多个终端——而不是为每个终端做一个特定的版本。
自适应
自适应就是在处理和分析过程中，根据处理数据的数据特征自动调整处理方法、处理顺序、处理参数、
边界条件或约束条件，使其与所处理数据的统计分布特征、结构特征相适应，以取得最佳的处理效果的
过程。
自适应过程是一个不断逼近目标的过程，它所遵循的途径以数学模型表示，称为自适应算法。通常采用
基于梯度的算法，其中最小均方误差算法(即LMS算法)尤为常用。
rem
rem（font size of the root element）是指相对于根元素的字体大小的单位。简单的说它就是一个相
对单位。
看到rem大家一定会想起em单位，em（font size of the element）是指相对于父元素的字体大小的单位
。它们之间其实很相似，只不过一个计算的规则是依赖根元素一个是依赖父元素计算。
em
<em> 标签告诉浏览器把其中的文本表示为强调的内容。对于所有浏览器来说，这意味着要把这段文字用
斜体来显示。
<em> 标签是一个短语标签，用来呈现为被强调的文本。
提示：我们并不反对使用这个标签，但是如果您只是为了达到某种视觉效果而使用这个标签的话，我们
建议您使用 CSS ，这样可能会取得更丰富的效果。
短语标签：
标签 描述
<em> 呈现为被强调的文本。
<strong> 定义重要的文本。
<dfn> 定义一个定义项目。
<code> 定义计算机代码文本。
<samp> 定义样本文本。
<kbd> 定义键盘文本。它表示文本是从键盘上键入的。它经常用在与计算机相关的文档或手
册中。
<var> 定义变量。您可以将此标签与 <pre> 及 <code> 标签配合使用.
全局属性
<em> 标签支持 HTML 的全局属性。
事件属性
<em> 标签支持 HTML 的事件属性。
流动布局（fluid grid）
"流动布局"的含义是，各个区块的位置都是浮动的，不是固定不变的。更多内容请查看流动布局的文章
。
代码
.main {
float: right;
width: 70%;
}
.leftBar {
float: left;
width: 25%;
}
代码
float的好处是，如果宽度太小，放不下两个元素，后面的元素会自动滚动到前面元素的下方，不会在水
平方向overflow（溢出），避免了水平滚动条的出现。
另外，绝对定位（position: absolute）的使用，也要非常小心。
选择加载CSS
"自适应网页设计"的核心，就是CSS3引入的Media Query模块。
它的意思就是，自动探测屏幕宽度，然后加载相应的CSS文件。
<link rel="stylesheet" type="text/css"
media="screen and (max-device-width: 400px)"
href="http://www.mamicode.com/tinyScreen.css" />
上面的代码意思是，如果屏幕宽度小于400像素（max-device-width: 400px），就加载tinyScreen.css
文件。
<link rel="stylesheet" type="text/css"
media="screen and (min-width: 400px) and (max-device-width: 600px)"
href="http://www.mamicode.com/smallScreen.css" />
如果屏幕宽度在400像素到600像素之间，则加载smallScreen.css文件。
除了用html标签加载CSS文件，还可以在现有CSS文件中加载。
@import url("tinyScreen.css") screen and (max-device-width: 400px);
CSS的@media规则
同一个CSS文件中，也可以根据不同的屏幕分辨率，选择应用不同的CSS规则。
代码
@media screen and (max-device-width: 400px) {
.column {
float: none;
width:auto;
}
#sidebar {
display:none;
}
}
代码
上面的代码意思是，如果屏幕宽度小于400像素，则column块取消浮动（float:none）、宽度自动调节（
width:auto），sidebar块不显示（display:none）。
相对大小的字体
字体也不能使用绝对大小（px），而只能使用相对大小（em）或者高清方案（rem）,rem不局限于字体大
小，前面的宽度width也可以使用，代替百分比
body {
font: normal 100% Helvetica, Arial, sans-serif;
}
上面的代码指定，字体大小是页面默认大小的100%，即16像素。
h1 {
font-size: 1.5em;
}
然后，h1的大小是默认大小的1.5倍，即24像素（24/16=1.5）。
small {
font-size: 0.875em;
}
small元素的大小是默认大小的0.875倍，即14像素（14/16=0.875）。
尽量少使用绝对宽度
由于网页会根据屏幕宽度调整布局，所以不能使用绝对宽度的布局，也不能使用具有绝对宽度的元素。
这一条非常重要。
具体说，CSS代码不能指定像素宽度：
通过指定百分比宽度来替代：同时还可以配合css的cal，进行计算宽度
width: xx%;
或者
width:auto;
允许网页宽度自动调整
"自适应网页设计"到底是怎么做到的？其实并不难。
首先，在网页代码的头部，加入一行viewport元标签
<meta name="viewport" content="width=device-width, initial-scale=1" />
viewport是网页默认的宽度和高度，上面这行代码的意思是，网页宽度默认等于屏幕宽度
（width=device-width），原始缩放比例（initial-scale=1）为1.0，即网页初始大小占屏幕面积的
100%。
所有主流浏览器都支持这个设置，包括IE9。对于那些老式浏览器（主要是IE6、7、8），需要使用css3
-mediaqueries.js。
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-
mediaqueries.js"></script>
<![endif]-->
自适应和响应式
先说共同点，两者都是因为越来越多的 移动设备（ mobile, tablet device ）加入到互联网中来而出
现的为移动设备提供更好的体验的技术。用技术来使网页适应从小到大（现在到超大）的不同分辨率的
屏幕.都是为了解决同一张页面在不同设备分辨率上合理展示的技术。
不同点：
响应式布局：不管用户使用的是什么设备都是在服务器把数据推送到浏览器后，脚本或CSS自行侦测屏幕
大小后执行对应的样式表内容，并且一直通过本地脚本在监听屏幕大小的变化，随时做出样式响应的变
化，所以是主动的。同一页面在不同大小设备可能呈现不一样的页面效果
自适应：不同大小设备呈现同样的页面效果，只是文字、图片等的大小不一样，但是相对位置一样。即
在不同大小设备看起来一样。
8.3心得