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. Nicholas C. Zakas（JS圣经：JavaScript高级程序设计作者）如何面试前端工程师

    Original Post:Interviewing the front-end engineerNicholas C. Zakas,2010年1月5日翻译完成:2010年1月7日,最后更新:2010 ...

  2. [ES6] Export class and variable

    Export variable: export const MAX_USERS = 3; export const MAX_REPLIES = 3; Export default class: exp ...

  3. 运行第一个Hadoop程序，WordCount

    系统: Ubuntu14.04 Hadoop版本: 2.7.2 参照http://www.cnblogs.com/taichu/p/5264185.html中的分享,来学习运行第一个hadoop程序. ...

  4. Tree( 树) 组件[1]

    本节课重点了解 EasyUI 中 Tree(树)组件的使用方法, 这个组件依赖于 Draggable(拖动)和 Droppable(放置)组件. 一． 加载方式//class 加载方式<ul c ...

  5. JavaScript对象属性 constructor

     对象属性 constructor 属性返回对创建此对象的数组函数的引用; constructor(构造函数) 在对象创建或实例化时候被调用的方法.通常使用该方法来初始化数据成员和所需资源.构造函数不 ...

  6. Assimp场景模型输出Collada,STL,3DPDF

    本文介绍开源库模型的几种输出格式:DAE,STL,3DPDF. Assimp是C++写的,AssimpNet是C#重构其中主要数据结构,并开通Assimp中重要方法的调用接口,为不熟悉C++的码农带来 ...

  7. title滚动

    代码: <html><head><title>滚动的文字在TITLE栏上不停滚动</title><script language=javascri ...

  8. ZOJ3558 How Many Sets III(公式题)

    转载请注明出处: http://www.cnblogs.com/fraud/          ——by fraud How Many Sets III Time Limit: 2 Seconds   ...

  9. 表单控件之select

    一.表单控件之表单 1.依次获取表单里的所有控件: for (i = 0; i < document.getElementById("formName").length; i ...

  10. oracle 主键应用序列和触发器实现自动增长

    oracle 主键自动增长 这几天搞Oracle,想让表的主键实现自动增长,查网络实现如下: create table simon_example ( id number(4) not null pr ...