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浏览器等等)都能显示出令人满意的效 ...
随机推荐
- js学习（一）-动态添加、修改、删除对象的属性和方法
//-----------------------js代码--------------------------- function class1(){ } //-------------------- ...
- jQuery验证控件jquery.validate.js的使用介绍
官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation jQuery plugin: Validation 使用说明 转载 ...
- 【转】性能测试，影响 TPS 的一些因素
首先我们要先了解下TPS的具体含义: TPS(Transaction Per Second):每秒事务数,指服务器在单位时间内(秒)可以处理的事务数量,一般以request/second为单位. 下面 ...
- Qt Creator设置多核编译（-j8参数）
In the qtcreator go to the "Projects tab" and set "Make arguments" as you like: ...
- 关于DLNA
Version:0.9 StartHTML:-1 EndHTML:-1 StartFragment:00000099 EndFragment:00005587 概念 DLNA的全称是DIGITAL ...
- 【转】【WPF】WPF为stackpanel设置滚动条
<ScrollViewer x:Name="scrolls" VerticalScrollBarVisibility="Auto" HorizontalS ...
- (笔记)Mysql命令grant on：增加新用户并控制其权限
grant on命令用于增加新用户并控制其权限. grant on命令格式:grant select on 数据库.* to 用户名@登录主机 identified by “密码”; 1) 增加一个用 ...
- python3处理json文件中含有中文dumps的应用
python3的编码问题一直比较简单 内存中字符串采用unicode 存储到文件中采用utf-8 以下为str,byte互相转换的过程: str = "abc学习" str Out ...
- (转)ffmpeg资源一览
一. FFmpeg主站1. FFmpeg的源码发布,资料网址: http://www.ffmpeg.org/ 源代码镜像站点网址:https://github.com/FFmpeg/FFmpeg 2 ...
- CI框架 -- 文件结构
这个本来是很基础的东西,基本上用过CI的人都知道这些,原本是不消说的~但是因为毕业论文是关于CodeIgniter的,所以我必须把大大小小的东西都写出来做成记录~ CodeInigter,一个轻量,功 ...