一丶CSS3的@media 查询

　　使用 @media 查询，你可以针对不同的屏幕大小定义不同的样式。 @media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。 当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面，这对调试来说是一个极大的便利。

@media mediaType and|not|only (media feature) {

     /*CSS-Code;*/

}

　　媒体类型(mediaType):   screen:  电脑屏幕,平板电脑,智能手机. speech:屏幕阅读器等发声设备

　　media feature:

　　　　1.max-width:定义输出设备中的页面最大可见区域宽度

　　　　2.min-width:定义输出设备中的页面最小可见区域宽度

　　1.编写响应式页面

　　　　(1)设置Meta标签

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

　　width = device-width:宽度等于当前设备的宽度

　　initial-scale: 初始的缩放比例(默认设置为1.0,即代表不缩放)

　　user-scalable:用户是否可以手动缩放(默认设置为no,因为我们不希望用户放大缩小页面)

　　　　(2)加载兼容文件JS

<!--[if lt IE 9]>

　　<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>

　　<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>

<![endif]-->

　　　　(3)设置IE渲染方式默认为最高(可选)

<meta http-equiv="X-UA-Compatible" content="IE=Edge，chrome=1">

　　　　ps:这段代码后面加了一个chrome=1，如果用户的电脑里安装了 chrome，就可以让电脑里面的IE不管是哪个版本的都可以使用Webkit引擎及V8引擎进行排版及运算，如果没有安装，就显示IE最新的渲染模式。

　　示例:

　　(1)如果文档宽度大于等于 1170px 则应用花括号内的样式——修改body的背景颜色(background-color):

@media screen and (min-width: 1170px) {

    body {

        background-color:lightblue;

    }

}

　　(2)当文档宽度大于等于 768px 并且小于等于992px （ width >=768 && width <=992）的时候显示的样式

@media screen and (min-width:768px) and (max-width:992px) {

    /* CSS 代码 */

}

二丶移动端单位介绍

　　在W3C中把尺寸单位划为两类:相对长度单位和绝对长度单位

　　然而相对长度单位按照不同的参考元素，又可以分为字体相对单位和视窗相对单位

　　字体相对单位有：em、ex、ch、rem；

　　视窗相对单位则包含：vw、vh、vmin、vmax几种

　　绝对定位则是固定尺寸，它们采用的是物理度量单位：cm、mm、in、px、pt以及pc。但在实际应用中，我们使用最广泛的则是em、rem、px以及百分比（%）来度量页面元素的尺寸。

　　px: 绝对（固定）单位
　　缺点：任何情况下都是固定值，会导致布局在不同尺寸下的设备错位

　　%：相对定位（会有影响发生变化）相对于父级（自身）大小进行定位
　　缺点：能确定范围的还是比较好计算的，对于不太好确定值得地方不好使用百分比，并且会导致变形，高度一般不好控制

　　em: 相对定位 （会有影响发生变化） em=当前字体大小
缺点：会根据当前容器字体大小发生变化，假如每个容器字体大小不一致，那么计算会非常麻烦

　　rem 
　　r==root
　　em=字体大小 font-size
　　rem 相对单位
　　只依赖于html字体大小

　　动态的修改根元素的font-size:

　　需要通过js去控制

/*获得页面宽度后动态修改html上的fontsize

* 320为iphone5设计稿下的页面宽度，如下设置后页面的页面在iphone5等宽屏幕上html

* 的font-size会变为20px，即 1rem = 100px    1px=0.05rem

* 所以设置元素尺寸的时候，如果测量设计稿 15px  则需设置尺寸为 (0.05*15)rem = 0.75rem

*/

!(function(doc, win) {

    var docEle = doc.documentElement,

        evt = "onorientationchange" in window ? "orientationchange" : "resize",

        fn = function() {

            var width = docEle.clientWidth;

            console.log(width)

            width && (docEle.style.fontSize = 20 * (width / 320) + "px");

        };

    win.addEventListener(evt, fn, false);

    doc.addEventListener("DOMContentLoaded", fn, false);

}(document, window));

　　将上面的文件引入到当前项目中，

　　代码如下:

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui">

        <title>移动端布局</title>

        <style type="text/css">

            *{

                padding: 0;

                margin: 0;

            }

            ul{

                list-style: none;

            }

            .clearfix:after{

                content: '';

                display: block;

                clear: both;

            }

            html{

                width: 100%;

                height: 100%;

                /*font-size: 30px;*/

                overflow: hidden;

            }

            body{

                width: 100%;

                height: 100%;

                overflow: auto;

            }

            .head-box{

                width: 100%;

                height: 4rem;

                background-color: red;

                position: absolute;

                top: 0;

                left: 0;

            }

            .list{

                margin-top: 4rem;

                font-size: 1.5rem;

            }

            .list .item{

                float: left;

                width: 7rem;

                height: 7rem;

                border: 1px solid black;

                margin: 0.25rem;

            }

        </style>

    </head>

    <body>

        <header class="head-box">

            <div class="head-top"></div>

            <div class="head-bottom"></div>

        </header>

        <ul class="list clearfix">

            <li class="item">1111111</li>

            <li class="item"></li>

            <li class="item"></li>

            <li class="item"></li>

            <li class="item"></li>

            <li class="item"></li>

            <li class="item"></li>

            <li class="item"></li>

        </ul>

    </body>

    <script src="./js/resize.js"></script>

</html>

三丶Bootstrap学习

　　详情请见 http://www.bootcss.com/

响应式及Bootstrap的更多相关文章

  1. 响应式布局 Bootstrap

    github介绍 (1)简单灵活可用于架构流行的 用户界面和交互接口 的html.css.javascript工具集 (2)基于html5.css3的bootstrap,具有大量的诱人特征: 友好的学 ...

  2. web响应式之bootstrap的基础用法。

    1/首先必须在head里面引用视窗viewport,以保证之后可以响应式分布 <!--meta:vp 响应式布局--> <meta name="viewport" ...

  3. 响应式框架Bootstrap

    概念:Bootstrap将会根据你的屏幕的大小来调整HTML元素的大小 -- 强调 响应式设计的概念. 通过响应式设计,你无需再为你的网站设计一个手机版的.它在任何尺寸的屏幕上看起来都会不错. Boo ...

  4. fcc 响应式框架Bootstrap 练习2

    text-primary 属性值使标题直接变成了红色,text-center使标题直接居中 <h2 class="text-primary  text-center"> ...

  5. 响应式与bootstrap

    一.单双击问题 <body> <button>按钮</button> <script src="./jQuery.js"></ ...

  6. 响应式布局 Bootstrap（01）

    1.是什么?Bootstrap,来自 Twitter,是目前最受欢迎的前端框架,Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷 Boot ...

  7. 10套免费的响应式布局 Bootstrap 模版

    1. Cardio Cardio是我最喜欢的一个轻量级模板.它几乎可以很少的修改的用于任何类型的业务. 2. Evento Evento 是一个事件引导广告模板的形状.它是设计精美和注意细节. 3. ...

  8. 响应式框架Bootstrap栅格系统

    <!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8&qu ...

  9. 响应式(2)——bootstrap的响应式

    <meta name="viewport" content="width=device-width,user-scalable=no"/> < ...

随机推荐

  1. 一些奇怪的Javascript用法

    阅读AngularJS时,看到一些奇怪的Javascript用法.1.(function(){        a.work=function(){}   })(a)   声明一个匿名函数并执行 2. ...

  2. shell if的使用

    1 字符串判断 str1 = str2 当两个串有相同内容.长度时为真 str1 != str2 当串str1和str2不等时为真 -n str1 当串的长度大于0时为真(串非空) -z str1 当 ...

  3. 32、Differential Gene Expression using RNA-Seq (Workflow)

    转载: https://github.com/twbattaglia/RNAseq-workflow Introduction RNAseq is becoming the one of the mo ...

  4. java虚拟机内存

    -Xmx10240m:代表最大堆  -Xms10240m:代表最小堆  -Xmn5120m:代表新生代  -XXSurvivorRatio=3:代表Eden:Survivor = 3    根据Gen ...

  5. Ubuntu12.04更新出现 The system is running in low-graphics mode解决方法

    这两天都困在这个问题上. 感谢:http://blog.chinaunix.net/uid-26748719-id-3780062.html 原因:显卡没驱动起来 解决方法: sudo apt-get ...

  6. 【Qt文档阅读】Window and Dialog Widgets

    Window and Dialog Widgets 没有嵌入到父控件中的控件(widget)称之为窗口(window).通常窗口带有边框和标题栏. Windows通常集成到桌面环境中,并且在某种程度上 ...

  7. windows配置换行符

    CR.LF.CR/LF为不同操作系统上使用的换行符: Windows/DOS系统:采用CR/LF表示下一行: Unix/Linux系统:采用LF表示下一行: Mac OS系统:采用CR表示下一行: M ...

  8. Open-source Tutorial - Material Design for WPF UI

    安装 Material Design Themes 通过 NuGet 包管理器搜索自动安装 通过 NuGet 包管理器控制台手动安装 Install-Package MaterialDesignThe ...

  9. 使用Log4j2，打包后提示ERROR StatusLogger Log4j2 could not find a logging implementation.

    从Log4j切换到Log4j2,没有打包之前日志输出正常,但是打包后总是提示下面内容: 错误一: ERROR StatusLogger Log4j2 could not find a logging ...

  10. JSONCPP开发环境搭建

    环境设置 项目地址 https://github.com/open-source-parsers/jsoncpp.git 操作系统 64位 Fedora 24 安装jsoncpp $ git clon ...