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. J2EE基础总结（4）——JSP

    什么是JSP       JSP全名为Java Server Pages,中文名叫javaserver页面,其根本是一个简化的Servlet设计,它是由Sun  Microsystems公司倡导.很多 ...

  2. Java开发者易犯错误Top10

    本文总结了Java开发者经常会犯的前十种错误列表. Top1. 数组转换为数组列表 将数组转换为数组列表,开发者经常会这样做: List<String> list = Arrays.asL ...

  3. NPM与调试工具的使用

    1)NPM 2)nodemon 自动监视文件的变化并重启应用 3)pm2 启动node,资源共享 4)node-inspector node调试工具 5)Chrome Developer Tools

  4. Facebook登录 AndroidStudio

    简介 主页:https://www.facebook.com/ Android开发者支持:https://developers.facebook.com/docs/android/  应用管理:htt ...

  5. OD: Memory Attach Technology - Off by One, Virtual Function in C++ & Heap Spray

    Off by One 根据 Halvar Flake 在“Third Generation Exploitation”中的描述,漏洞利用技术依攻击难度从小到大分为三类: . 基础的栈溢出利用,可以利用 ...

  6. (转)WCF入门教程（一）简介

    原文系列来自http://www.cnblogs.com/yank/p/3653160.html 1.WCF是什么? WCF( Windows Communication Foundation), 是 ...

  7. ruby.new

    ruby.new 输出:print.puts.p 注释 #say hello =begin this is a long comment =end 变量 local: time or _time in ...

  8. protected访问修饰符

    子类可以调用, 但实例化的对像不可调用  new object;

  9. UVALive - 5116

    dfs n以内所有素数的乘积map或set删多余的,有点思维在里面,就写写

  10. php echo字符串的连接格式

    echo "<td align=\"center\"><img src=\""; 1.  \"    \" 2. ...