模拟Bootstrap响应式网格系统

Bootstrap响应式（适应于不同的终端设备）.Bootstrap栅格系统是利用百分比把视口等分为12个，然后利用媒体查询，设置float属性使之并列显示

一.媒体查询

媒体查询包含一个可选的媒体类型和零或多个表达式来限制使用媒体特性的样式表范围

例如width,height,color.CSS3中的Media queries让内容的呈现可以只针对特定范围的输出设备而不必去改变内容本身.

以下是Bootstrap常用媒体查询尺寸

@media (max-width: 767px) {}   /*小于等于767像素*/

@media (min-width: 768px) and (max-width: 991px) {} /*768~991px像素之间(包含最小像素768与最大像素991)*/

@media (min-width: 992px) and (max-width: 1199px) {} /*992px~1199px像素之间(包含最小像素992与最大像素1199)*/

@media (min-width: 1200px) {} /*大于等于1200px*/

常用媒体查询分辨率分界点截图

三.Bootstrap栅格系统百分比计算　12/100 = 栅格等分/x(百分比)

* { box-sizing: border-box; }

[class*="col-"] { float: left; padding: 15px; border: 1px solid red; }

.col-1 {width: 8.33%;}

.col-2 {width: 16.66%;}

.col-3 {width: 25%;}

.col-4 {width: 33.33%;}

.col-5 {width: 41.66%;}

.col-6 {width: 50%;}

.col-7 {width: 58.33%;}

.col-8 {width: 66.66%;}

.col-9 {width: 75%;}

.col-10 {width: 83.33%;}

.col-11 {width: 91.66%;}

.col-12 {width: 100%;}

三.实现当浏览器尺寸小于等于767px像素垂直排列显示，当浏览器尺寸大于767px像素排成一行显示

四.关于IE兼容性说明

viewport是网页默认的宽度和高度，上面这行代码的意思是，网页宽度默认等于屏幕宽度（width=device-width），原始缩放比例（initial-scale=1）为1.0，即网页初始大小占屏幕面积的100%.

所有主流浏览器都支持这个设置，包括IE9。对于那些老式浏览器（主要是IE6、7、8），需要使用css3-mediaqueries.js .(或者使用respond.js也可以让IE6-IE8支持CSS3 media Query)

让IE(包括IE6)浏览器支持HTML5标准<语义化标签等> 需要使用html5.js

源代码如下

<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8" />

		<!--IE不管是哪个版本的都可以使用Webkit引擎及V8引擎进行排版及运算  Google Chrome 内嵌浏览器框架GCF-->

		<meta http-equiv="X-UA-Compatible" content="IE=Edge，chrome=1">

		<!--viewport是网页默认的宽度和高度，上面这行代码的意思是，网页宽度默认等于屏幕宽度（width=device-width），

		原始缩放比例（initial-scale=1）为1.0，即网页初始大小占屏幕面积的100%-->

		<meta name="viewport" content="width=device-width; initial-scale=1.0">

		<!--[if IE]>

			 <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>

		     <script src=”http://html5shiv.googlecode.com/svn/trunk/html5.js”></script>

		< ![endif]-->

		<title>媒体查询</title>

		<style>

	        html, body, div, p, header,hgroup, h1, h2,article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {

	        	margin: 0;

	        	padding: 0;

	        }

	        /*HTML5 新增语义化标签*/

	        article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {

	        	display: block;

	        }

	        html {

	        	font-size: 100%;

	        }

	    	body {

	    		width: 100%;

				height:100%;

				font-size: 1rem;

				background-color:#fff;

				color:#333;

				font-family:"华文细黑 Regular", "Helvetica", "Arial", "Verdana", "sans-serif";

				-webkit-font-smoothing: antialiased;

	    	}

	    	*, *:before, *:after {

	    		box-sizing: border-box;

	    		-webkit-box-sizing: border-box;

	    	}

	    	header {

	    		padding-left: 0.9375em;

	    		padding-right: 0.9375em;

	    		background-color: #000000;

	    		line-height: 2.5em;

	    	}

	    	h2 {

	    		font-size: 1.125em;  /*1 ÷ 16 × 18 = 1.125em值*/

	    		color: #FFF;

	    	}

	    	.container {

	    		padding-top:  0.9375em;

	    		padding-bottom:  0.9375em;

	    		padding-left: 0.9375em;

	    		padding-right: 0.9375em;

	    	}

	    	.container p {

	    		line-height: 1.5em;

	    	}

	    	.row-box{

	    		display: block;

	    	}

			/*---------------------------------------—--------

	    	  栅格系统

	    	 *----------------------------------------------- */

	    	.col-sm-4  {

	    		position: relative;

	    		min-height: 1px;

	    		width: 100%;

	    		padding-right: 15px;

	    		padding-left: 15px;

	    		color: #FFFFFF;

	    		font-weight: 600;

	    	}

	    	[class*="col-sm-"] {

	    		padding-top:15px;

	    		padding-bottom: 15px;

	    	}

	    	/*小于等于767像素*/

	    	@media (max-width: 767px) {

	    		.col-sm-4 {

		    		width: auto;

		    	}

	    	}

	    	/*768~991px像素之间(包含最小像素768与最大像素991)*/

			@media (min-width: 768px) and (max-width: 991px) {

				.col-sm-4 {

		    		width: 33.3%;

		    		float: left;

		    	}

			}

			/*992px~1199px像素之间(包含最小像素992与最大像素1199)*/

			@media (min-width: 992px) and (max-width: 1199px) {

				.col-sm-4 {

		    		width: 33.3%;

		    		float: left;

		    	}

			}

			/*大于等于1200px*/

			@media (min-width: 1200px) {

				.col-sm-4 {

		    		width: 33.3%;

		    		float: left;

		    	}

			}

			/*----------------------------------------

			 底部导航

			*----------------------------------------*/

			footer {

				position: fixed;

				width: 100%;

				bottom: 0;

				padding-left: 0.9375em;

	    		padding-right: 0.9375em;

	    		line-height: 2.5em;

				background-color: #000000;

				color: #FFFFFF;

			}

	    </style>

	</head>

	<body>

		<header>

			<hgroup>

				<h2>头部导航</h2>

			</hgroup>

		</header>

		<div class="container">

			<p>所有主流浏览器都支持这个设置，包括IE9。对于那些老式浏览器（主要是IE6、7、8），需要使用css3-mediaqueries.js</p>

			<p> HTML5-JS文件-让IE(包括IE6)浏览器支持HTML5标准 需要使用html5.js</p>让支持HTML5元素

			<div class="row-box">

				<div class="col-sm-4" style="background-color: #ef0655;">AAA</div>

				<div class="col-sm-4" style="background-color: #00AABB;">BBB</div>

				<div class="col-sm-4" style="background-color: #285E8E;">CCC</div>

			</div>

		</div>

		<footer><h2>底部导航版权 @By Avenstar</h2></footer>

	</body>

</html>

2019 年1月19 日补充：

a.、对于媒体查询谷歌、火狐浏览器支持良好，但在IE8 及以下不支持，可以通过js获取IE浏览器版本来设置，这样优点在于不依赖第三方库、加载速度快，从而很好的解决IE浏览器的不兼容媒体查询的bug。

b、通常pc 端与app端硬件设备容量限制，app端开发代码对性能的要求更高些。

c、媒体查询虽然可以解决不同设备匹配元素大小，但是却不能像js灵活控制其元素平滑过渡。

//获取浏览器信息

var browser=navigator.appName;

var b_version=navigator.appVersion;

var version=b_version.split(";");

var ie = false;

if(version[1]){

    var trim_Version=version[1].replace(/[ ]/g,"");

    if(browser=="Microsoft Internet Explorer" && trim_Version=="MSIE6.0")

    {

        ie = true;

    }

    else if(browser=="Microsoft Internet Explorer" && trim_Version=="MSIE7.0")

    {

        ie = true;

    }

    else if(browser=="Microsoft Internet Explorer" && trim_Version=="MSIE8.0")

    {

        ie = true;

    }

    else if(browser=="Microsoft Internet Explorer" && trim_Version=="MSIE9.0")

    {

        ie = true;

    }

}

作者：Avenstar

出处：http://www.cnblogs.com/zjf-1992/p/6166443.html

关于作者：专注于WEB前端开发

本文版权归作者所有,转载请标明原文链接。

如果觉得我的文章对您有用，请随意打赏。您的支持将鼓励我不断的迭代！

支付宝

微信

【参考资料】

https://my.oschina.net/JeeChou/blog/198464

https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Media_queries

https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries good tutorials

http://qianduanblog.com/post/bootstrap3-learning-1-responsive-layout.html

http://www.ruanyifeng.com/blog/2012/05/responsive_web_design.html

http://bootstrap.ninghao.net/scaffolding.html

https://segmentfault.com/a/1190000007567739

http://v3.bootcss.com/css/#grid

模拟Bootstrap响应式网格系统的更多相关文章

css模拟Bootstrap响应式布局——栅格
做作业的时候遇见用css模拟Bootstrap的栅格布局,学习了一下.发现这个很有用,用来在不同的平台上得到很好地用户体验,比如Phone.Pad.大屏幕显示器.小屏幕显示器.自己模拟用css写了一下 ...
Bootstrap_响应式网格系统
首先添加CSS样式: [class *= col-]{ background-color: #eee; border: 1px solid #ccc; } [class *= col-] [class ...
Bootstrap 响应式设计
本教程讲解如何在网页布局中应用响应式设计.在课程中,您将学到响应式 Web 设计.随着移动设备的普及,如何让用户通过移动设备浏览您的网站获得良好的视觉效果,已经是一个不可避免的问题了.响应式 Web ...
bootstrap响应式网页设计的9条基本原则！
bootstrap响应式网页设计是针对多屏幕问题的一个很好的解决方案,但从印刷的视角来看有点困难.没有固定的页面尺寸,没有毫米或英寸,没有任何的物理限制,无从下手. 为了desktop和mobile单 ...
bootstrap响应式前端页面
技术:HTML+CSS+JS+bootstrap 概述这套代码响应式前端页面基本写完了,适合初学前端的同学,里面主要运用了HTML+CSS布局和动画,js逻辑较少,页面都是静态,未接入接口.响应 ...
Bootstrap响应式布局
Bootstrap响应式布局可以使用栅格化系统,其实就是不同的列组合,配合起来便能组合出强大的功能,系统会自动分为最多12列,超出12列会作为一个整体另起一行,像制作表格table的合并列,功能跟co ...
关于禁用bootstrap响应式解决方法
前几天接到一个任务,用bootstrap框架写几个静态页面,由于长时间专注于后台开发,所以,花费了3天时间,才终于写完了页面,其中,来回的修改,把遇到的问题说一下. 用bootstarp做完页面后,组 ...
Bootstrap 响应式表格
响应式表格通过把任意的 .table 包在 .table-responsive class 内,您可以让表格水平滚动以适应小型设备(小于 768px).当在大于 768px 宽的大型设备上查看时,您 ...
20分钟成功编写bootstrap响应式页面就这么简单
最近发现一个叫 Bootstrap 的好东西,Bootstrap 是现在最流行的响应式 CSS 框架,它以移动设备优先,能够快速适应不同设备.使用它编写响应式页面快捷.方便,而且屏蔽了浏览器差异.使用 ...

随机推荐

SQL数据类型
1.Character 字符串: 数据类型描述存储 char(n) 固定长度的字符串.最多8,000个字符. n varchar(n) 可变长度的字符串.最多8,000个字符. varchar ...
ASP.NET Aries JSAPI 文档说明：AR.Form、AR.Combobox
AR.Form 文档 1:对象或属性: 名称类型说明 data 属性编辑页根据主键请求回来的数据 method 属性用于获取数据的函数指向,默认值Get objName 属性用于拦截form ...
Linux.NET学习手记（7）
前一篇中,我们简单的讲述了下如何在Linux.NET中部署第一个ASP.NET MVC 5.0的程序.而目前微软已经提出OWIN并致力于发展VNext,接下来系列中,我们将会向OWIN方向转战. 早在 ...
一步步开发自己的博客 .NET版剧终篇（6、响应式布局和自定义样式）
前言这次开发的博客主要功能或特点: 第一:可以兼容各终端,特别是手机端. 第二:到时会用到大量html5,炫啊. 第三:导入博客园的精华文章,并做分类.(不要封我) 第四:做 ...
ECMAScript 6 扫盲
ECMAScript 6 目前基本成为业界标准,它的普及速度比 ES5 要快很多,主要原因是现代浏览器对 ES6 的支持相当迅速,尤其是 Chrome 和 Firefox 浏览器,已经支持 ES6 中 ...
基于DDDLite的权限管理OpenAuth.net 1.0版正式发布
距离上一篇OpenAuth.net的文章已经有5个多月了,在这段时间里项目得到了很多朋友的认可,开源中国上面的Star数接近300,于是坚定了我做下去的信心.最近稍微清闲点,正式推出1.0版,并在阿里 ...
android内部培训视频_第五节(1)_OA实战之登录界面
第五节(1):OA实战之登录界面一.登录界面布局 1.背景图片 2.文本框 3.checkbox 4.按钮暂未实现点击切换图片效果 <RelativeLayout xmlns:androi ...
Oracle数据库Job的下次执行时间老是变动问题
job的 interval设置为 sysdate+1 结果好多客户的这个时间最后会变的乱起八糟, 或是导入 , 或是手动执行了等等, 还有自动会变的, 而且不少, 觉得莫名其妙, , 今天网上搜了下 ...
如何隐藏DIV对象
DIV对象在网页里面,相当于一个容器,在其内部,可以显示文字.图片.视频控件等等. 以下的教程,和大家一起来学习,如何隐藏DIV对象. 这必须使用CSS来控制,才能达到隐藏的目的,那么,就得使用CSS ...
C#设计模式-策略者模式
状态模式是对某个对象状态的抽象,而本文要介绍的策略模式也就是对策略进行抽象,策略的意思就是方法,所以也就是对方法的抽象,下面具体分享下我对策略模式的理解. 一. 策略者(Stragety)模式在现实 ...

模拟Bootstrap响应式网格系统

模拟Bootstrap响应式网格系统的更多相关文章

随机推荐

热门专题