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:..)的语法方式

一切技术的学习都要知道原理，还有就是看官网！此处，我只是为了给自己整理一下笔记，(*^__^*) 嘻嘻……

BootStrap学习之先导篇——响应式网页的更多相关文章

  1. Bootstrap 学习笔记 项目实战 响应式轮播图

    左右两个箭头可以随浏览器缩放进行移动 保持在图片中间 Html代码: <!DOCTYPE html> <html lang="zh-cn"> <hea ...

  2. Bootstrap 学习笔记 项目实战 响应式导航栏

    导航代码HTML: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset=&q ...

  3. 学习笔记1－－响应式网页＋Bootstrap起步＋全局CSS样式

    一.学习之前要了解一些背景知识: 在2g时代,3g时代,4g时代,早期的网页浏览设备,功能机,智能机.(本人最喜欢的透明肌,和古典黑莓机) 1.什么是响应式网页? Responsive Web Pag ...

  4. bootstrap响应式网页设计的9条基本原则！

    bootstrap响应式网页设计是针对多屏幕问题的一个很好的解决方案,但从印刷的视角来看有点困难.没有固定的页面尺寸,没有毫米或英寸,没有任何的物理限制,无从下手. 为了desktop和mobile单 ...

  5. 响应式网页设计：互联网web产品RWD概念

    RWD(Responsive Web Design)可称为自适应网页设计.响应式网页设计.响应式网页设计等等,是一种可以让网页的内容可以随着不同的装置的宽度来调整画面呈现的技术,让使用者可以不需要透过 ...

  6. 15款免费的 HTML5/CSS3 响应式网页模板

    如果你想快速制作出一个优秀的网站,网站模板一定是必不可少的.网页设计师和开发人员也可以从网站模板入手,学习先进的布局方式和编码风格.下面这个列表为大家挑选了15款免费的 HTML5/CSS3 响应式网 ...

  7. HTML5+CSS3的响应式网页设计：自动适应屏幕宽度

    这几天都在修改博客上面的样式.本来用的是d83.0的模板.自己又修改了许多地方,其中自己修改的一些地方在手机里面显示的效果不是很理想,于是想改成自适应的效果.对CSS3不是特别的熟练,只能去网上找找案 ...

  8. 第二百三十六节，Bootstrap辅组类和响应式工具

    Bootstrap辅组类和响应式工具 学习要点: 1.辅组类 2.响应式工具 本节课我们主要学习一下 Bootstrap 的辅组类和响应式工具,辅助类提供了一组类来辅 组页面设计,而响应式工具则利用媒 ...

  9. Bootstrap栅格系统详解,响应式布局

    Bootstrap栅格系统详解 栅格系统介绍 Bootstrap 提供了一套响应式.移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列. 栅格系统用于通 ...

随机推荐

  1. Android源代码之Gallery专题研究（2）

    引言 上一篇文章已经解说了数据载入过程,接下来我们来看一看数据载入后的处理过程.依照正常的思维逻辑.当数据载入之后,接下来就应该考虑数据的显示逻辑. MVC显示逻辑 大家可能对J2EE的MVC架构比較 ...

  2. CMA连续物理内存用户空间映射---(一)

    背景: 在多媒体和图像处理等应用中,经经常使用到大块内存,尤其是硬件编解码.须要内核分配大块的物理连续内存. 这里希望通过把从内核分配的连续物理内存映射到用户空间.在用户空间经过处理,又能够入队到驱动 ...

  3. iOS-BLE蓝牙开发持续更新

    文/煜寒了(简书作者)原文链接:http://www.jianshu.com/p/84b5b834b942著作权归作者所有,转载请联系作者获得授权,并标注“简书作者”. 在写这个博客之前,空余时间抽看 ...

  4. Http请求的 HttpURLConnection 和 HttpClient

    HTTP 请求方式: GET和POST的比较 请求包.png 例子.png 响应包.png 例子.png 请求头描述了客户端向服务器发送请求时使用的http协议类型,所使用的编码,以及发送内容的长度, ...

  5. Visual Studio 2015 RC Downloads

    https://www.visualstudio.com/en-us/downloads/visual-studio-2015-downloads-vs

  6. dijkstra堆优化模板

    #include<iostream> #include<cmath> #include<algorithm> #include<cstring> #in ...

  7. Codeforces Round #318(Div 1) 573A, 573B,573C

    转载请注明出处: http://www.cnblogs.com/fraud/          ——by fraud 这场的前两题完全是手速题...A题写了7分钟,交的时候已经500+了,好在B题出的 ...

  8. sublime3 ctl+b无效

    Preference->Browse Packages->python,编辑Python.sublime-build文件,在字典里添加path item,value为你的python路径, ...

  9. Redis VS Memcached 转载

    引子: 在大数据时代,总希望存在一个Key-value存储机制,像HashMap一样在内存中处理大量(千万数量级)的key-value对,以便提高数据查找.修改速度. 所以,我们会想到,Memcach ...

  10. .a静态库的注意事项

    .a静态库  生成的时候   可以分为  debug 版本  和  release 版本. debug:速度比较慢,比较耗性能.会启动更多的  Xcode 系统监控功能.  对错误的敏感度不高. re ...