<!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. H5canvas基础

    本篇文章开始讲解HTML5的核心功能之一:Canvas 通过Canvas可以动态生成和展示图形.图表.图像以及动画. Canvas API功能非常多,我们将讨论最常用的功能. 我们先新建一个canva ...

  2. spark on yarn 运行问题记录

    问题一: 18/03/15 07:59:23 INFO yarn.Client: client token: N/A diagnostics: Application application_1521 ...

  3. Zookeeper和Chubby【分布式协调系统】

    前言(对于协调系统来说其客户端往往是分布式集群) 大规模分布式系统需要解决各种类型的协调需求: 当集群中有新的进程或服务器加入时,如何探测到它的加入?如何能够自动获取配置参数? 当配置信息被某个进程或 ...

  4. HTML5 唤起 APP

    <p><a href="xxx://app/question/95">点击跳转,直接回帖报名</a></p> /* global n ...

  5. os和sys模块的区别及其常用方法总结

    官方解释:os: This module provides a portable way of using operating system dependent functionality. 翻译:提 ...

  6. Oracle数据库常用命令记录

    1.Sql建表 CREATE TABLE AAABBBCCCDDD( ID ) primary key, AAAAAAAA ) not NULL, BBBBBBBB ), CCCCCCCC ), DD ...

  7. Linux 虚存的性能问题

    虚存子系统是所有 UNIX 系统的核心组件.下面讨论虚存系统的实现及其对操作系统中几乎其他所有子系统的作用和影响.首先详细说明一些基本的内存管理问题:然后具体分析 Linux 操作系统如何实施虚存管理 ...

  8. Openstack：Instance cannot ping by domain name

    Issue: When you created an instance inside Openstack, you may find that you cannot ping address by d ...

  9. ROS机器人程序设计-学习小结-

    ROS官网 |易科 |虞坤林 |古月居 |ROSClub 学习ROS相关书籍推荐:http://blog.csdn.net/zhangrelay/article/details/52244746 RO ...

  10. 信用卡3D验证相关资料

    3D 验证服务,是银行与VISA .MASTERCARD国际组织联合推出的为保障银行维萨及万事达信用卡持卡客户网上交易安全,防范网上伪冒交易的一项信用卡网上支付安全验证服务( 维萨卡使用的验证服务叫& ...