分类导航
HTMLHTML5JavaScriptCSSjQueryBootstrapAngularjsVueDojoJsonElectronNode.jsExpressXMLAjaxUnityReactFlexWeb前端微信小程序支付小程序百度小程序

响应式栅格系统

HTML5   发布时间：2022-04-25  发布网站：大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了响应式栅格系统，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

响应式栅格系统可以看作流式栅格系统和媒体查询的组合，设计响应式栅格系统时，关键在于需要相应哪些设备，根据需要兼容的设备特性设置一些宽度断点，基于这些断点来构建代码

流式栅格系统

说到流式栅格系统有必要所以下一个经典的自适应布局——“圣杯布局”（又称“双飞翼布局”），先贴代码

HTML部分：

<div id="page">
	<div id="hd">
		<p>Header</p>
	</div>
	<div id="bd">
		<div class="main">
			<div class="main-wrap">
				<p>Main</p>
			</div>
		</div>
		<div class="sub">
			<p>Sub</p>
		</div>
		<div class="extro">
			<p>Extro</p>
		</div>
	</div>
	<div id="ft">
		<p>Footer</p>
	</div>
</div>
对于上面的文档结构，要实现的效果是sub和extro区域固定宽度，main区域出现在中间并且随着窗口尺寸自动变化。圣杯布局的基本思路是让三个盒子都向左浮动，同时将sub盒向左“移动”距离（margin-left:-100%），这样sub盒就会重叠在main盒上面并紧贴父元素左边缘，extro盒也做同样的处理，不过只向左“移动”230px，这样就让extro紧贴父元素右边缘，main-wrap盒再设以合适的左右边距，就可以实现如结果所示的效果

CSS部分：

*{
	padding: 0;
	margin: 0;
}
#page{
	width: 80%;
	margin: 0 auto;
}
#hd,#bd,#ft{
	width: 100%;
	BACkground-color: blue;
}
.main{
	float: left;
	width: 100%;
	BACkground-color: yellow;
}
.main-wrap{
	margin: 0 230px 0 190px;
	BACkground-color: red;
}
.sub{
	float: left;
	width: 190px;
	margin-left: -100%;
	BACkground-color: green;
}
.extro{
	float: left;
	width: 230px;
	margin-left: -230px;
	BACkground-color: gray;
}
程序结果：

响应式栅格系统


这种布局可以保证主要内容（main）在整个文档中靠前出现，这样在网速比较慢的情况下重要内容也能先渲染出来。此外，该布局能够按照屏幕尺寸变化自动伸缩主区域，而且其布局思想可以轻易扩展到左右两栏的场景


从上面的例子可以看出，利用浮动可以很方便的实现栅格系统，进而实现多列布局，比如一个960像素宽的4列栅格系统：

.row{
	margin: 0 auto;
	width: 960px;
}
.row:after{
	clear: left;
	content: " ";
	display: table;
}
[class^="col"]{
	float: left;
}
.col1{
	width: 25%;
	BACkground-color: yellow;
}
.col2{
	width: 50%;
	BACkground-color: blue;
}
.col3{
	width: 75%;
	BACkground-color: green;
}

流式栅格系统实现起来非常简单，使用也非常简单：

<div class="row">
	<div class="col1">.col1</div>
	<div class="col2">.col2</div>
	<div class="col1">.col1</div>
</div>
最终效果如下所示：

响应式栅格系统


媒体查询（从media到media queries）

从原理上讲，media queries并不是新东西，在CSS2.1版本就有@media规则了，不过那时@media属性只是用来区分媒体的类型，它支持下面这些类型的媒体

braille：盲文

embossed：浮雕排版

handled：手持设备

print：普通打印机

projection：投影仪

screen：屏幕

speech：语音合成器（非视觉）

tty：电话

tv：电视机

all：适用于所有情况

可以看到CSS2.1支持非常多的媒体类型，比如针对打印机我们可能需要在footer加上一行版权信息：

@media print{
      .footer:after{
            content:"版权所有，翻版必究";
      }
}
这样只有在打印的时候才会出现这些字

CSS3的media queries模块扩展了@media的应用范围，使其不仅能识别媒体类型，也能识别媒体特征——比如屏幕宽度，设备像素比甚至色彩等参数

@H_401_4@media queries语法很简单，@media关键字后面跟一个媒体类型，然后再跟一个或多个媒体识别条件表达式，每个条件用and连接，如果设备满足条件，就执行其中的CSS代码。比如识别iphone4的一段代码可能是这样的：

@media all and (max-width:320pX) and (-webkit-min-device-pixel-ratio:2){
      /*在这里编写针对iphone4的代码*/
}
除了直接写入CSS代码这种方式意外，media queries还可以直接写到link元素的media属性中，这样做的好处是可以按需加载CSS文件： 

<link rel="stylesheet" href="#" media="screen and (min-width:1024pX)" />
此外还可以使用Not关键字对查询结果取反： 

@media not screen and (color){
      /*非显示器并且是彩色的，比如彩电*/
}
only关键字本身没有什么特别的意义，但是在不支持only的浏览器中，可以用来隐藏样式表 

<link rel="stylesheet" href="#" media="only screen and (color)" />
除了用and来连接表达式，表达式之间还可以用逗号来分割，这时候其语义等价于or 

@media (min-width:700pX),handled and (orientation:landscapE){……}


从上面这些例子可以看出，许多media特征都会有“MIn-”和“max-”前缀，下面是一些常见的可供查询的media的特性

color：设备彩色，如果想进一步查询彩色深度，可以通过min-color来指定，比如min-color：4

color-index：使用索引色的设备，可以通过min-color-index来指定查询索引色的色数

device-index：设备宽度，有max和min版本，如果使用px做单位，指的是设备的物理像素，这和viewport中的device-width含义是不一样的

device-height：设备高度

width：布局视口宽度，同样有max和min版本

height：类似width

resolution：解析度，有max和min版本。单位是DPI或者DPPX。DPI和DPPx是类似的单位，大部分情况下两者是等价的。在基于webkit的浏览器上，可以使用非标准的-webkit-min-device-pixel-ratio来实现同样的查询，而且使用方便——1表示普通解析度的屏幕，2表示re@R_197_11520@a屏幕。当使用DPPX单位时，和device-pixel-ratia是等价的

orientation：屏幕方向，有landscape（横屏）和porTrait（竖屏）两种选择

除了上面介绍的这些常用的媒体特性之外，CSS3 media queries还提供了很多其他特性：针对电视机的扫描方式（scan）、monochrome（单色）屏幕、grid（位图）设备和aspect ratia（屏幕宽高比）等，配合使用几乎能定位出任意两种不同设备的特征。

响应式栅格系统

相对于流式栅格系统，响应式栅格系统只是多了一些媒体查询的内容，基本原理是没有变化的，直接上代码

HTML部分：

<!DOCTYPE HTML>
<html>

<head>
    <title></title>
    <Meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <Meta name="viewport" content="width=device-width,initial-scale=1.0">//非常关键的一步
    <link rel="stylesheet" href="css/demo.css" type="text/css" />
</head>

<body>

    <header class="row" style="BACkground-color:blue;">
        header
    </header>
    
    <div class="row">
        <div class="col1" style="BACkground-color:red;">nav</div>
        <div class="col2" style="BACkground-color:gray;">main</div>
        <div class="col1" style="BACkground-color:yellow;">aside</div>
    </div>

    <footer class="row" style="BACkground-color:green;">
        footer
    </footer>

</body>

</html>

CSS部分： 

*{
	margin: 0 auto;
}
/*普通屏幕使用960px的宽度*/
.row{
	width: 960px;
}
.row:after{
	clear: left;
	content: " ";
	display: table;/*清除行中浮动*/
}
[class^="col"]{
	float: left;
}
.col1{
	width: 25%
}
.col2{
	width: 50%;
}
.col3{
	width: 75%;
}

/*屏幕设备宽度大于1200px时row宽度固定为1170px*/
@media screen and (min-width: 1200pX){
	.row{
		width: 1170px
	}
}

/*对于平板电脑每行宽度为720px*/
@media screen and (min-width: 768pX) and (max-width: 979pX){
	.row{
		width: 720px;
	}
} 

/*横屏的手机或者竖屏的平板将所有列按行排列*/
@media screen and (max-width: 767pX){
	[class^="col"]{
		float: none;
		width: 100%;
	}
	.row{
		width: 100%;
	}
}

/*竖屏的手机*/
@media screen and (max-width: 480pX){

}

这样在不同宽度的视口下得到的结果就不一样了


下面通过一个实例来详细讲解media queries实现响应式设计的具体内容

使用CSS3 Media Queries实现网页自适应：http://xinyo.org/archives/62104/#top

大佬总结

以上是大佬教程为你收集整理的响应式栅格系统全部内容，希望文章能够帮你解决响应式栅格系统所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。
标签：响应式栅格系统
猜你在找的HTML5相关文章
其他相关热搜词更多
phpJavaPython程序员load中如何string使用参数jquery开发安装listlinuxiosandroid工具javascriptcap