<!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. 将一个div置于另一个div之上

    div piao置于div bg之上 <div class="bg"> <div class="piao" style="backg ...

  2. 螺旋打印2D数组

    //一破题付出血的代价 多思考!public static void offer(int [][]a){ ,right=a.length-,low=,high=a[].length-; while(l ...

  3. C# 获取当前屏幕DPI

    1.通过Graphics类获取 Graphics currentGraphics = Graphics.FromHwnd(new WindowInteropHelper(mainWindow).Han ...

  4. 字符流之FileReader&FileWriter

    package zhang; import java.io.FileReader; import java.io.FileWriter; import java.io.IOException; pub ...

  5. centos6 网卡配置,多IP设置

    ##云服务器 centos6网卡配置 #设置出口IP vim /etc/sysconfig/network-scripts/ifcfg-eth0DEVICE=seth0 #网卡名称 BOOTPROTO ...

  6. ng-book札记——HTTP

    Angular拥有自己的HTTP库,可以用于调用外部API. 在JavaScript世界里有三种方式可以实现异步请求,Callback,Promise与Observable.Angular倾向于使用O ...

  7. Docker内核能力机制

    能力机制(Capability)是 Linux 内核一个强大的特性,可以提供细粒度的权限访问控制. Linux 内核自 2.2 版本起就支持能力机制,它将权限划分为更加细粒度的操作能力,既可以作用在进 ...

  8. makefile 和shell文件相互调用

    shell 文件内调用makefile文件:   #!/bin/bash cd ctemplate-2.1./configuresudo make -f installcd ../cd Templat ...

  9. postgresql跨服务器复制数据库

    假设名为dbname数据库需要从A服务器拷贝到B服务器 接收服务器B postgres用户 需先重置B服务器postgres系统用户的密码,使之与数据库用户postgres一致: passwd -d ...

  10. SimpleDateFormat中parse和format的区别

    parse()返回的是一个Date类型数据,format返回的是一个StringBuffer类型的数据 //SimpleDateFormat中的parse方法可以 //把String型的字符串转换成特 ...