grid响应式布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
padding:0;
margin:0;
}
.box {
background-color: #444;
color: #fff;
padding: 20px;
}
.header,
.footer {
background-color: #999;
}
.sidebar2 {
background-color: #ccc;
color: #444;
}
.sidebar {
grid-area: sidebar;
}
.sidebar2 {
grid-area: sidebar2;
}
.content {
grid-area: content;
}
.header {
grid-area: header;
}
.footer {
grid-area: footer;
}
@media only screen and (min-width: 400px) {
.wrapper {
display: grid;
grid-template-columns: 80px 10px auto;
grid-template-rows: auto;
grid-template-areas:
"header header header"
"sidebar . content"
"sidebar2 sidebar2 sidebar2"
"footer footer footer";
}
}
@media only screen and (min-width: 700px) {
.wrapper {
display: grid;
grid-template-columns: 100px 20px auto 20px 100px;
grid-template-rows: auto;
grid-template-areas:
"header header header header header"
"sidebar . content . sidebar2"
"footer footer footer footer footer";
}
}
</style>
</head>
<body>
<div class="wrapper">
<div class="box header">Header</div>
<div class="box sidebar">Sidebar</div>
<div class="box sidebar2">Sidebar 2</div>
<div class="box content">
<h2>Content</h2>
<p>More content than we had before so this column is now quite tall.</p>
</div>
<div class="box footer">Footer</div>
</div>
</body>
</html>
grid响应式布局的更多相关文章
- Flex、Grid、媒体查询实现响应式布局
本篇文章主要讲述使用Flex布局.Grid布局以及媒体查询三种方式来实现响应式布局. 文章涉及代码在线coding地址 效果图: 文字描述: 屏幕大小不同,展示列数不同,1-5号按照屏幕大小可展示2到 ...
- web页面之响应式布局
一.什么是响应式布局? 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本.这个概念是为解决移动互联网 ...
- CSS3与页面布局学习笔记（四）——页面布局大全(负边距、双飞翼、多栏、弹性、流式、瀑布流、响应式布局)
一.负边距与浮动布局 1.1.负边距 所谓的负边距就是margin取负值的情况,如margin:-100px,margin:-100%.当一个元素与另一个元素margin取负值时将拉近距离.常见的功能 ...
- media screen 响应式布局(知识点)
一.什么是响应式布局? 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端--而不是为每个终端做一个特定的版本.这个概念是为解决移动互联网 ...
- bootstrap 自适应和响应式布局的区别
自适应: 不管屏幕多大,都尽量不换行,而只是横向缩放. 响应式: 屏幕变小了之后,属于同一行的元素受到挤压后,行的右边元素自动换行显式: 屏幕大了后,本属于同一行的元素尽可能的排在同一行内: boo ...
- css3 响应式布局 Media Query
1.什么是响应式布局? 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简单说就是一个网站能够兼容多个终端. 2.响应式布局的优缺点? 优点:面对不同分辨率设备灵活性强,快捷 ...
- Bootstrap响应式布局
Bootstrap响应式布局可以使用栅格化系统,其实就是不同的列组合,配合起来便能组合出强大的功能,系统会自动分为最多12列,超出12列会作为一个整体另起一行,像制作表格table的合并列,功能跟co ...
- CSS3之响应式布局及其应用
使用 Media 属性前需添加兼容移动设备优先代码 <meta name=”viewport”content=”width=device-width,initial-scale=1.0,maxi ...
- 你不知道的css各类布局（四）之响应式布局
响应式布局 概念 响应式布局指的是同一页面在不同屏幕尺寸下有不同的布局 布局特点 响应式设计的目标是确保一个页面在所有终端上(各种尺寸的PC.手机.手表.冰箱的Web浏览器等等)都能显示出令人满意的效 ...
随机推荐
- SpringBoot2 【关于：Table 'XXX.hibernate_sequence' doesn't exist】
将ID生成略组改成@GeneratedValue(strategy = GenerationType.IDENTITY).
- IDEA 中 同一个微服务 按照多个端口启动
网上讲这个东西的很多,抄来抄去的,大部分类似,多数没讲明白为什么那么配置. 譬如eureka.client.register-with-eureka和fetch-registry是否要配置,配不配区别 ...
- jQuery .load() 里面的代码不能执行
今天在写代码的时候发现.on('load')绑定的事件没用.代码如下: debugger断点没进来,说明函数压根没进来. 后面在stackoverflow上找到了解决方法,方法如下图: 这样写,如果提 ...
- SparkR初体验2.0
突然有个想法,R只能处理百万级别的数据,如果R能运行在Spark上多好!搜了下发现13年SparkR这个项目就启动了,感谢美帝! 1.你肯定得先装个spark吧.看这:Spark本地模式与Spark ...
- 关于Unity中LOD和渲染队列----渲染通道通用指令(一)
每个shader里面有很多的subshader,如果所以的subshader都不执行的话就,就执行fallback.每个subshader都可以设置一个LOD,整个shader也有一个LOD. 系统就 ...
- 转：用法总结：NSNumber、NSString、NSDate、NSCalendarDate、NSData(待续)
NSNumber + (NSNumber *)numberWithInt:(int)value; + (NSNumber *)numberWithDouble:(double)value; - (in ...
- 模式识别之bayes---bayes 简单天气预测实现实例
Bayes Classifier 分类 在模式识别的实际应用中,贝叶斯方法绝非就是post正比于prior*likelihood这个公式这么简单,一般而言我们都会用正态分布拟合likelihood来实 ...
- Python装饰器、metaclass、abc模块学习笔记
(博客原创作品,转载请注明出处!) 最近接触到了Python中的decorator,metaclass,abc Module,six.add_metaclass等内容,这里做一个简单的笔记. 主要资源 ...
- 记一次艰难的IBM X3850重装系统和系统备份经验
[贴心话] 刚刚把一切都搞定了,回到电脑前立马就写下的这篇文章,写的很细节,大家就耐心看看,有些细节是网上没有的,共享一下,仅供参考,以减少大家装机时遇到的困难. [面临处境] 机器型号:IBM X3 ...
- c# 阿拉伯数字转成中文
调用方法: public string ConvertToChineseNumber(string old) { Chinese ch = new Chinese(); long num = Conv ...