<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <style>

        body{

            margin: 0;

        }

        .pg{

            width: 100%;

            background-color: rebeccapurple;

        }

        @media (min-width: 666px) {

            .pg{

                background-color: green;

            }

        }

        @media (min-width: 888px) {   //大于 888 就红色

            .pg{

                background-color: red;

            }

        }

    </style>

</head>

<body>

    <div>

        <div class="pg">响应式布局</div>

    </div>

</body>

</html>

基于 bootstrap html 响应式 布局的更多相关文章

  1. Metronic – 超赞！基于 Bootstrap 的响应式后台管理模板

    Metronic 是一套精美的响应式后台管理模板,基于强大的 Twitter Bootstrap 框架实现.Metronic 拥有简洁优雅的 Metro UI 风格界面,6 种颜色可选,76 个模板页 ...

  2. FineUI十周年纪念版即将发布（基于像素的响应式布局，独此一家）！

    [新版预报]FineUI十周年纪念版(v5.0.0)即将于2018-04-23发布! 官网示例已更新:http://pro.fineui.com/ 特别助攻:基于像素的响应式布局,FineUI独家秘笈 ...

  3. 关于bootstrap和响应式布局

    bootstrap导入 首先需要安装好插件 然后就是在代码器写导入代码 代码如下 <html lang="zh-CN"> <head> <meta c ...

  4. Bootstrap禁用响应式布局

    在Bootstrap中极其重要的一个技术内容便是响应式布局了,一次编码针对不同设备终端的强大能力使得响应式技术愈发流行. 不过正所谓"萝卜青菜各有所爱",如果你想要使用Bootst ...

  5. Bootstrap实战 - 响应式布局

    一.介绍 响应式布局就是一个网站能够兼容多个终端,而不是为每个终端做一个特定的版本.这个概念是为解决移动互联网浏览而诞生的. 导航栏与轮播在大部分网站的头部占很高的比重,特别是导航栏,扮演着网站地图的 ...

  6. Metronic-最优秀的基于Bootstrap的响应式网站模版

    在所有我看到过的基于Bootstrap的网站模版中,Metronic是我认为最优秀的,其外观之友好.功能之全面让人惊叹.Metronic 是一个自适应的HTML模版,提供后台管理模版和前端内容网页模版 ...

  7. 基于 Bootstrap 的响应式后台管理面板

    你想建立一个后台管理面板或者分析仪表板吗?不需从头开始,Keen IO Bootstrap 是一个响应式的仪表盘模板,可以帮助你在几分钟内呈现数据,让你可以创建一个有吸引力的,定制的分析仪表板,随时可 ...

  8. 推荐几款基于Bootstrap的响应式后台管理模板

    1.Admin LTE 该模版开源免费. AdminLTE - 是一个完全响应式管理模板.基于Bootstrap3的框架.高度可定制的,易于使用.支持很多的屏幕分辨率适合从小型移动设备到大型台式机. ...

  9. 转：Metronic – 超赞！基于 Bootstrap 的响应式后台管理模板

    http://www.cnblogs.com/lhb25/p/metronic-responsive-admin-dashboard-template.html

随机推荐

  1. 4-fiddler抓包中文乱码：

    接受到的html被压缩了,要解压,在工具栏有decode

  2. 性能优化之_android布局优化

    优化布局的的原则就是减少创建的对象的数量,setContentView话费onCreate到onResume中的大概99%的时间1.使用Relativelayout而不是LinearLayout,Li ...

  3. Windows Chocolatey

    一.简介 Chocolatey是Windows下包管理工具,可以使用 Chocolatey 来安装应用程序.   二.安装 1)在线安装:参见 主页 官网:https://chocolatey.org ...

  4. fiddler抓包时显示Tunnel to......443

    打开手机浏览器,输入http://192.168.0.65:8888/FiddlerRoot.cer

  5. HDU 4430 Yukari's Birthday (二分)

    题意:有 n 个蜡烛,让你插到蛋糕上,每一层要插 k^i个根,第0层可插可不插,插的层数是r,让 r * k 尽量小,再让 r 尽量小,求r 和 k. 析:首先先列出方程来,一个是不插的一个是插的,比 ...

  6. XE下 SVG格式的图标使用方法

    下载一个SVG格式的图标,千图网,http://tool.58pic.com/tubiaobao/ 用txt文本打开SVG图标 拖一个PathLabel控件 在PathLabel控件的Data属性添加 ...

  7. Eclipse平台下配置Go语言开发环境（Win7）

    <Go语言编程>中写到:“从功能和易用性等方面考虑, Eclipse+GoEclipse.LiteIDE这两个环境在所有IDE里面是表现最好的”,所以笔者打算采用Eclipse+GoEcl ...

  8. "ServiceStack.Redis.RedisNativeClient”的方法“get_Db”没有实现。

    解决办法: 1.首先通过nuget程序包管理器将相关依赖项卸载干净 2.检查各项目模块中的package.config里还有没有redis的节点,如果已经存在就删除掉 3.去别的正常的项目中看一下re ...

  9. .Net Core 自动化部署：使用docker版jenkins部署dotnetcore应用

    安装docker版jenkins 因为jenkins的docker版本本身没有 dotnetcore的环境,所以我们需要先自己动手制作下包含dotnet环境的jenkins Docker Contai ...

  10. 「Luogu 1471」 方差

    题目背景 滚粗了的HansBug在收拾旧数学书,然而他发现了什么奇妙的东西. 题目描述 蒟蒻HansBug在一本数学书里面发现了一个神奇的数列,包含N个实数.他想算算这个数列的平均数和方差. 输入输出 ...