基础布局

重置样式的作用

浏览器的默认样式往会给我们带来麻烦，影响开发效率，解决方法就是一开始就将浏览器的默认样式全部去掉，更准确说就是通过重新定义标签样式，让标签在各个浏览器中显示一致。

最简单的重置样式

*{
    margin:0;
    padding:0;
}

reset.css

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

/* 重置样式 */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

html{
    /* 16px = 1rem */
    font-size: 16px;
    user-select: none;
}

响应式布局

意在实现不同屏幕分辨率的终端上浏览网页的不同展示方式。
通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验。

优点：
面对不同分辨率设备灵活性强
能够快捷解决多设备显示适应问题

缺点：
兼容各种设备工作量大，效率低下
代码累赘，会出现隐藏无用的元素，加载时间加长
其实这是一种折衷性质的设计解决方案，多方面因素影响而达不到最佳效果
一定程度上改变了网站原有的布局结构，会出现用户混淆的情况

说到响应式布局，就不得不提起CSS3中的Media Query（媒介查询）
使用这个工具，我们可以非常方便快捷的制造出各种丰富的实用性强的界面。

视口viewport

视口指的是移动设备中的设备屏幕窗口。
在移动端浏览器当中，存在着两种视口：
一种是可见视口（也就是我们说的设备大小），另一种是视窗视口（网页的宽度是多少）。     

什么是可见视口，什么又是视窗视口呢？此处举一个例子：
如果我们的屏幕是320像素*480像素的大小（iPhone4）
假设在浏览器中，320像素的屏幕宽度能够展示980像素宽度的内容
那么320像素的宽度就是可见视口的宽度，而能够显示的980像素的宽度就是视窗视口的宽度。      

为了显示更多的内容，大多数的浏览器会把自己的视窗视口扩大，
简易的理解，就是让原本320像素的屏幕宽度能够容下980像素甚至更宽的内容（将网页等比例缩小）。       

常见viewport数值
iPhone：980
iPad：1024
Android：980
WinPhone：1024

<!-- 将视口设置为320像素 -->
<meta　name="viewport"　content= "width=320" />

<!-- 将视口设置为设备宽度 -->
<meta　name="viewport"　content= "width=device-width" />

<!-- 将视口设置为设备宽度，并在最初的时候以放大2倍的方式显示 -->
<meta　name="viewport"　content= "width=device-width, initial-scale=2.0"　/>

<!-- 将视口设置为设备宽度，并允许缩放，最大放大到2倍，最小缩小到1/2 -->
<meta　name="viewport"　content= "width=device-width, maximum-scale=2.0,　minimum-scale=0.5" />

<!-- 将视口设置为设备宽度，并禁止缩放 -->
<meta　name="viewport"　content= "width=device-width, user-scalable=no"　/>