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. firefox关于about:config的常用配置

    about:config是火狐的设置页面,火狐提供了不少高级设置选项在这里以便让你可以更加详细地控制火狐的运行方式.(官方不推荐用户手工修改about:config的设置.所以,如果你对于你想修改的内 ...

  2. Swift学习——A Swift Tour 函数

    Functions and Closures  函数和封闭性(闭包) Functions  函数的使用 Swift中的函数定义和OC中有明显的差别了,使用func定义函数,在括号里定义參数和类型,用 ...

  3. C语言排序算法复习

    排序算法有很多种,这里在复习和分析的基础上,做一个自己的总结: 首先要知道有哪些排序算法,google一下,有云C语言7大经典排序算法(也有8大).主要包括冒泡排序,快速排序,选择排序,插入排序,希尔 ...

  4. 大数据笔记10：大数据之Hadoop的MapReduce的原理

    1. MapReduce(并行处理的框架) 思想:分而治之,一个大任务分解成多个小的子任务(map),并行执行后,合并结果(Reduce) (1)大任务分解成多个小任务,这个过程就是map: (2)多 ...

  5. Python字符串格式符号含义

    ====== #字符串格式化符号含义 #%C 格式化字符串及其ASCLL码 >>> '%c' %97 'a' >>> '%c' % 97 'a' >>& ...

  6. js字符串转json

    1,eval方式解析,这是最早的解析方式了.如下: 代码如下: function strToJson(str){ var json = eval('(' + str + ')'); return js ...

  7. web前端技术

    在网上找了点前端资料,记录下来,以便后面工作可能用到. Flat UI:一个WEB界面工具组件库.很多漂亮的菜单.按钮等. stickUp:一个jquery插件,可以将页面中的元素固定.经常用在把菜单 ...

  8. win7 重启 IIS.

    步骤 1,打开 "控制面板",并将右上角的"查看方式"设置为 "大/小图标". 2,选择 "管理工具": 3,打开 In ...

  9. 自定义标签（JSTL）

    自定义标签的步骤: 1.确定需求,如:用<my:date/>输出当前时间 2.编写Java类:需要实现实现接口javax.servlet.jsp.tagext.JspTag 具体的接口为: ...

  10. uva 10167 - Birthday Cake

    题解:由于解太多,随机抓 A.B, 只要有符合就行了: (首先,Ax+By=0必须表示直线,即A.B不能同时为0:另外,要注意到直线不能过输入中的2N个点:检测点在直线的哪一侧,只需要简单的线性规划的 ...