<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style type="text/css">
    	@media only screen and (min-width: 100px) and (max-width: 400px) {
    		#test{
    			height:100px;
    			width:100px;
    			background: red;
    		}
    	}
    	@media only screen and (min-width: 400px) and (max-width: 600px) {
    		#test{
    			height:300px;
    			width:300px;
    			background:green;
    		}
    	}
    	@media only screen and (min-width: 600px) and (max-width: 800px) {
    		#test{
    			height:600px;
    			width:600px;
    			background: yellow;
    		}
    	}
    </style>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <div id="test">测试内容</div>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

页面显示截图：

符合条件一的时候显示的效果：

2：符合条件二的时候显示的效果：

3、符合条件三显示的效果：



Bootstrap模板代码+页面自适应页面的案例代码的更多相关文章

  1. Spring Boot 使用 AOP 实现页面自适应

    鉴于复杂页面自适应的难度,一般会做几套模板分别适应手机.平板.电脑等设备.使用 Spring Boot 开发单体应用时,一般会使用 Thymeleaf 模板,那么可以使用 AOP 技术来实现页面自适应 ...

  2. Web前端代码规范与页面布局

    一.    规范目的: 为提高工作效率,便于后台人员添加功能及前端后期优化维护,输出高质量的文档,在网站建设中,使结构更加清晰,代码简明有序,有一个更好的前端架构,有利于SEO优化.   二.     ...

  3. jQuery实现等比例缩放大图片让大图片自适应页面布局

    通常我们处理缩略图是使用后台代码(PHP..net.Java等)根据大图片生成一定尺寸的缩略图,来供前台页面调用,当然也有使用前台javascript脚本将加载后的大图强行缩放,变成所谓的缩略图,这种 ...

  4. JavaScript提高：003：easy UI实现tab页面自适应问题

    前面说到使用easyUI在asp.net中实现了tab控件效果.http://blog.csdn.net/yysyangyangyangshan/article/details/38307477只是有 ...

  5. 手机端页面自适应：rem布局

    rem布局非常简单,首页你只需在页面引入这段原生js代码就可以了 (function (doc, win) { var docEl = doc.documentElement, resizeEvt = ...

  6. 手机端页面自适应解决方案—rem布局进阶版

    手机端页面自适应解决方案—rem布局进阶版   https://www.jianshu.com/p/985d26b40199 注:本文转载之处:https://www.cnblogs.com/anni ...

  7. 手机端页面自适应解决方案—rem布局（进阶版，附源码示例）

    转自:https://segmentfault.com/a/1190000007350680 一年前笔者写了一篇 <手机端页面自适应解决方案—rem布局>,意外受到很多朋友的关注和喜欢.但 ...

  8. 手机端页面自适应解决方案—rem布局（该方案目前已过时）

    转自:https://segmentfault.com/a/1190000004705207 相信很多刚开始写移动端页面的同学都要面对页面自适应的问题,当然解决方案很多,比如:百分比布局,弹性布局fl ...

  9. rem手机端页面自适应完美解决方案（最新）

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

随机推荐

  1. JVM常见问题 一（转载）

    1. 内存模型以及分区 JVM内存模型如下图所示: 此处我们集中注意中间绿色的部分,该部分为JVM的运行时内存,该部分包含了: 线程私有的(灰色): 程序计数器:记录执行到第几条指令 虚拟机方法栈:执 ...

  2. JS的事件模型

    之前对事件模型还是比较清楚的,许多概念都清晰映射在脑海中.工作之后,一方面使用的局限性,二是习惯于用框架中的各种事件监听方式,简单即方便,久而久之,事件的一些概念开始淡出记忆中,就像我现在已经开始淡忘 ...

  3. Python安装与环境变量

    Python安装与环境变量的配置  python下载: Python安装包下载地址:http://www.python.org/ 根据实际的操作系统,安装合适的安装版本.    Python安装: 本 ...

  4. delphi 验证码识别(XE8源码)

    如题:源码下载

  5. Python 字符串字典内置函数&方法

    Python字典包含了以下内置函数: 序号 函数及描述 1 cmp(dict1, dict2)比较两个字典元素. 2 len(dict)计算字典元素个数,即键的总数. 3 str(dict)输出字典可 ...

  6. 计算机网络之文件传送协议FTP

    FTP 文件传送协议FTP(File Transfer Protocol)是因特网上使用最广泛的文件传送协议. FTP 提供交互式的访问,允许客户指明文件的类型与格式,并允许文件具有存取权限.FTP ...

  7. hbase大规模数据写入的优化历程

    业务背景:由于需要将ngix日志过滤出来的1亿+条用户行为记录存入Hbase数据库,以此根据一定的条件来提供近实时查询,比如根据用户id及一定的时间段等条件来过滤符合要求的若干行为记录,满足这一场景的 ...

  8. 剑指Offer——联通研究院笔、面试题 (Offer已收割)

    剑指Offer--联通研究院笔.面试题 1.二叉树适宜存储什么样的数据? 树最适合用来表示( C ). A．有序数据元素 B．无序数据元素 C．元素之间具有分支层次关系的数据 D．元素之间无联系的数据 ...

  9. ubuntu蓝牙音响配对成功但在声音设置中无法设置 解决

    ubuntu蓝牙音响配对成功但在声音设置中无法设置 解决 首先,连接蓝牙 但是,在声音设置中如下: 都没有发现设备??? 打开终端输入: ~$ pactl load-module module-blu ...

  10. Scheme N皇后

    (define (range n) (define (recur n) () '() (cons n (recur (- n ))))) (recur (- n ))) (define (flatte ...