一丶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. 【总结整理】关于IE6的兼容性

    1. /*IE6兼容性,input边框border:none无效,不能去掉,只能把背景颜色去掉*/ background: none; /*background-color:#fff ;*/ 2. / ...

  2. layui 常用方法 readme

    layui样式加载: layui.use(['table', 'element', 'laydate', 'layer'], function () { var table = layui.table ...

  3. 16、SGE作业调度系统的简介

    转载:http://www.zilhua.com/2222.html http://gridscheduler.sourceforge.net/htmlman/ SGE作业调度系统的简介 一.常见的几 ...

  4. Linux网络编程组播测试代码

    Linux网络编程组播测试代码 (转载)   组播客户端代码如下: #include <sys/types.h>#include <sys/socket.h>#include ...

  5. 2、Spark基本工作原理与RDD

    一.基本工作原理 1.特点 分布式: 主要是基于内存(少数情况基于磁盘): spark与,MapReduce最大的不同在于迭代式计算: MR分为两个阶段,map和reduce,两个阶段完了我们,job ...

  6. web特点

    1.图形化和易于导航的 Web是非常易于导航的,只需要从一个连接跳到另一个连接,就可以在各页各站点之间进行浏览了. 2.与平台无关 这里所说的平台是指软件的运行环境,可以是Windows.Linux等 ...

  7. Python开发【第五篇】：函数

    1. 函数   函数是组织好的,可重复使用的,用来实现单一,或相关功能的代码块.   函数分为 Python 程序内置函数,用户自定义的函数.将代码定义为函数,有如下好处: 代码重用(某个特定功能复用 ...

  8. 前端中的事件循环eventloop机制

    我们知道 js 是单线程执行的,那么异步的代码 js 是怎么处理的呢?例如下面的代码是如何进行输出的: console.log(1); setTimeout(function() { console. ...

  9. Ocelot - .Net Core开源网关

    Ocelot - .Net Core开源网关 作者:markjiang7m2 原文地址:https://www.cnblogs.com/markjiang7m2/p/10857688.html 源码地 ...

  10. 用python实现杨辉三角

    def yanghui(lines): currentlst,lastlst,n=[],[],1 if lines<1: return while n<=lines: lastlst=cu ...