标签：显示 实现 参数 project 总结 nbsp 界面 splay pre
Bootstrap学习之前，要知道响应式网页的原理。
1.什么是响应式网页？
一个页面，可以根据浏览设备的不同，以及特性的不同，而自动改变布局、大小等。使得在不同的设备上上都可以呈现优秀的界面。
优点：可以自动适配PC、PAD、PHONE浏览器屏幕
不足：代码变复杂，需要考虑更多兼容性，并不适合内容非常多网页
2.需要掌握的是viewport的概念
早期的网页都是比较大，用于在手机屏幕中浏览，只能进行缩小，导致用户的浏览体验不好。iOS中提出了Viewport（视口）的概念，可以任意的指定大小，显示任意大小的网页：
网页内容不再缩放得很小，可以看清。Android也引用该概念。
为了防止视口宽度超过手机屏幕宽度，推荐设置为width=device-width，这样使得响应式网页可以根据当前设备设置vieport的宽度
3.如何手写响应式网页
(1)添加viewport元标签
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
注意几个参数的意义：user-scalable：用户是否可缩放
(2)容器宽度尽量使用相对尺寸，不用绝对单位：100%之类
(3)文字尽量使用相对尺寸，不用绝对单位：rem和em
(4)图片尽量使用相对尺寸，代替绝对单位
img {
max-width: 100%; /*不会超过图片的原始尺寸，防止无限放大产生的失真*/
}
(5)尽量避免固定布局，使用流式布局
1)float: left;
2)display: inline-block;
(6)使用CSS3 Media Query技术，实现有选择性的执行CSS，这是BootStrap实现的基础！！
4.CSS3媒体查询技术
Media：媒体、媒介，指浏览网页的设备，如screen(pc/pad/phone/watch)、print、tv、projection、tty(命令行、针式打印机)、braille等
Query：查询出浏览设备的特性，如宽、高、色彩深度、解析度、方向等
CSS3 Media Query：在CSS中，根据浏览设备的类型、特性不同而有选择性的执行不同的CSS代码。
比如：现有一个HTML页面，里面有一个div，根据不同的设备宽度，设置不同的背景颜色。
HTML片段：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> <title>响应式网页</title> </head> <body> <div class="box"> </div> </body> </html>
然后，给HTML页面添加响应式的媒体查询CSS代码，当设备宽度大于992px时，为红色
<style type="text/css"> .box{ width:50%; min-height: 100px; } @media screen and (min-width: 992px) { .box { background-color: #f00; } } </style>
当设备宽度在768px和991px之间时，为绿色
@media screen and (min-width: 768px) and (max-width:991px) { .box { background-color: #0f0; } }
当设备宽度小于767px时，为蓝色
@media screen and (max-width: 767px) { .box { background-color: #00f; } }
总结：
注意①.在头部添加<meta name="viewport" content="width=device-width"> ②.@media screen and ( min-width:..)/(max-width:..)的语法方式
一切技术的学习都要知道原理，还有就是看官网！此处，我只是为了给自己整理一下笔记，(*^__^*) 嘻嘻……
标签：显示 实现 参数 project 总结 nbsp 界面 splay pre
原文地址：http://www.cnblogs.com/mini-fan/p/6112025.html
