<!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. sb error

    width: $("#StudentManagement").parent().width(), height: $("#StudentManagement") ...

  2. 荣耀10带来AI版WPS,玩转潮酷新功能

    图书馆里,想把喜欢的句子和情节留存, 无奈摘抄需要时间,拍下来又很容易遗忘在相册? 课堂偷偷拍摄的课件, 模糊一片难以辨认? 开会培训收集的PPT照片, 总有那么几页对焦失败? 这些当时起劲,后来就& ...

  3. Oracle的dual

    1.dual 确实是一张表.是一张只有一个字段,一行记录的表. 2.习惯上,我们称之为'伪表'.因为他不存储主题数据.3.他的存在,是为了操作上的方便.因为select 都是要有特定对象的.但如果我们 ...

  4. lgp20151222 java中如何将Object类型转换为int类型

    if (object instanceof Integer) {    Integer.parseInt(object.toString()); } 很简单是不是?我就想提醒下自己,java有个特殊词 ...

  5. Redis持久化的两种方式(RDB和AOF)

    redis提供了两种持久化的方式,分别是RDB(Redis DataBase)和AOF(Append Only File). RDB,简而言之,就是在不同的时间点,将redis存储的数据生成快照并存储 ...

  6. C++框架_之Qt的开始部分_概述_安装_创建项目_快捷键等一系列注意细节

    C++框架_之Qt的开始部分_概述_安装_创建项目_快捷键等一系列注意细节 1.Qt概述 1.1 什么是Qt Qt是一个跨平台的C++图形用户界面应用程序框架.它为应用程序开发者提供建立艺术级图形界面 ...

  7. Spring + Mybatis 集成原理分析

    由于我之前是写在wizNote上的,迁移过来比较浪费时间,所以,这里我直接贴个图片,PDF文件我上传到百度云盘了,需要的可直接下载. 地址:https://pan.baidu.com/s/12ZJmw ...

  8. 实验与作业(Python)-04 数据类型、数学函数与字符串

    截止日期 实验目标 继续熟悉for循环与turtle 数值运算符 math库常用函数 字符串转化为数值类型(int, float, complex) 字符串常用函数 实验内容 任务1.使用for代替w ...

  9. IP_ADD_MEMBERSHIP 失败

    /*将本机加入多播组*/ err = setsockopt(fd, IPPROTO_IP, IP_ADD_MEMBERSHIP,&mreq, sizeof(mreq)); if (err &l ...

  10. TCP发送源码学习(2)--tcp_write_xmit

    一.tcp_write_xmit()将发送队列上的SBK发送出去,返回值为0表示发送成功.函数执行过程如下:1.检测拥塞窗口的大小.2.检测当前报文是否完全处在发送窗口内.3.检测报文是否使用nagl ...