<!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. Linux下SonarQube代码质量平台的安装和使用方法

    Sonar简介: Sonar是一个用于代码质量管理的开源平台,用于管理源代码的质量,可以从七个维度检测代码质量 通过插件形式,可以支持包括java,C#,C/C++,PL/SQL,Cobol,Java ...

  2. struts2中的使用BaseAction获取Session

    package com.owen.ma; import java.util.Map; import org.apache.struts2.interceptor.RequestAware; impor ...

  3. mysql常见的优化需要注意的点

    1.explain分析explian引用索引基数show indexes from table_name;主键索引具有最好的基数 测试时 不走缓存SELECT SQL_NO_CACHE id from ...

  4. C++笔记007：易犯错误模型——类中为什么需要成员函数

    先看源码,在VS2010环境下无法编译通过,在VS2013环境下可以编译通过,并且可以运行,只是运行结果并不是我们期待的结果. 最初通过MyCircle类定义对象c1时,为对象分配内存空间,r没有初始 ...

  5. 含有分类变量（categorical variable）的逻辑回归（logistic regression）中虚拟变量（哑变量，dummy variable）的理解

    版权声明:本文为博主原创文章,博客地址:,欢迎大家相互转载交流. 使用R语言做逻辑回归的时候,当自变量中有分类变量(大于两个)的时候,对于回归模型的结果有一点困惑,搜索相关知识发现不少人也有相同的疑问 ...

  6. PHP Libxml 函数

    PHP Libxml 简介 Libxml 函数和常量与 SimpleXML.XSLT 以及 DOM 函数一起使用. 安装 这些函数需要 Libxml 程序包. 在 xmlsoft.org 下载 PHP ...

  7. 剑指Offer——知识点储备-故障检测、性能调优与Java类加载机制

    剑指Offer--知识点储备-故障检测.性能调优与Java类加载机制 故障检测.性能调优 用什么工具可以查出内存泄露 (1)MerroyAnalyzer:一个功能丰富的java堆转储文件分析工具,可以 ...

  8. Windows编译ejabberd

    Windows编译ejabberd(金庆的专栏)安装 erlang OTP. 添加路径到 PATH, 使 erl 可以运行.git clone ejabberd安装 rebar:git clone g ...

  9. Maven简介（Maven是什么）

    简介 Maven,在意第绪语中意为对知识的积累.Maven最初用来在Jakarta Turbine项目中简化该项目的构建过程.Jakarta Trubine项目有多个工程,每个工程都有自己的多个Ant ...

  10. Kafka系列之-Kafka入门

    接下来的这些博客,主要内容来自<Learning Apache Kafka Second Edition>这本书,书不厚,200多页.接下来摘录出本书中的重要知识点,偶尔参考一些网络资料, ...