响应式布局初步学习

选中文字可对指定文章内容进行评论啦,绿色背景文字可以点击查看评论额。

一直想学习响应式布局的基础知识,然后结合基础知识写一些小的demo,今天从一个最简单的header菜单写起,一步步学习响应式设计。

需求:实现一个简答的菜单功能,在大屏幕的时候横向多列排列,而在小屏幕的时候是有一列,菜单项目纵向排列。

 

1、html代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="style.css">
  <title>menu-nav</title>
</head>
<body>
<div class="flex-container">
	<div class="nav">我的笔记</div>
	<div class="nav">个人主页</div>
	<div class="nav">登录注册</div>
</div>
</body>
</html>

这里我们知道,我的菜单有三个,分别是我的笔记,个人主页,以及登录注册。

下面是css,很显然我会使用媒体查询:

* {
	margin:0;
	padding:0;
}

html {
	font-size:16px;
	font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.flex-container {
	display: flex;
	flex-direction:column;
	font-size:1.5rem;
	text-align: center;
}

.nav {
	background-color: darkgray;
	padding: 15px;
	flex: 50px;
	line-height:2;
}

.nav:hover{
	background-color: lightgray;
}

@media (min-width: 768px) {
	.flex-container {
		flex-direction: row;
	}
}

多列的情况:

一列的情况:

一直以为,基础知识是高楼大厦的根本。

版权声明:著作权归作者所有。

相关推荐

Django:创建JSON响应

Django 1.7之前版本在Django1.7之前可以结合json以及HttpResponse创建json响应import json from django.http import HttpResponse response_data = {} response_data['result'] = 'er

CSS3:Flex布局

Flex是一种弹性布局,要分为两部分理解Flex:作用于容器(flex-container)的属性作用于容器里项目(flex-item)的属性Flex布局不同于块元素的垂直排列和行内元素的水平排列。Flex布局可以根据需要设定容器内的项目元素是水平还是垂直分布。设定了flex的方向后,我们就可以确定了Flex分布的主轴(main axis)以及交叉轴(cross axis)。主

[译]使用JDK 9 Flow API进行响应式编程

什么是响应式编程?响应式编程是关于处理数据项的异步流,也就是应用程序在数据项发生时对其进行响应。 数据流实质上是指随时间发生的数据项序列。与迭代内存数据相比, 这个模型的内存效率更高,因为数据是以流的形式处理的。在响应式编程模型中,有一个Publisher和一个Subscriber。 Publisher发布一个数据流,Subscriber异步订阅。该模型还提供了一种机

GPU架构学习资源

这里收藏了gpu学习的网站,pdf等等资源:http://courses.cms.caltech.edu/cs179/http://www.amd.com/Documents/GCN_Architecture_whitepaper.pdfhttps://community.arm.com/graphics/b/bloghttp://cdn.imgtec.com/sdk-documentation/

[译]5分钟学习React.js

本教程将通过构建一个非常简单的应用程序,让你对React.js有基本的了解。我会抛弃所有我认为不是核心的东西。如果你喜欢我的教学风格,在我们即将推出免费的React.js课程时你想收到通知,可以在此留下电子邮件。设置在开始使用React时,你应该使用最简单的设置:在html文件中使用script标签导入React和ReactDOM库,如下所示:<html><head><

你今天应该学习的20个Python代码段(翻译)

Python是一门非BS编程语言。可读性和设计简单性是其广受欢迎的两个主要原因。正如Python的禅宗所说:美丽胜于丑陋。 显式胜于隐式。这就是为什么值得记住一些常见的Python技巧来帮助改善代码设计的原因。这些将为你节省每次需要到Stack Overflow找解决方案的时间。在日常编码练习中,以下技巧将非常有用。1.反转字符串以下代码段使用Python切片操作来反转字符串。# Rev

thenjs 学习

thenjs 是一个js的异步控制流程库 特点 可以像标准的Promise那样,把N多异步回调函数写成一个长长的then链,并且比Promise更简洁自然。因为使用标准Promise的then链,其中的异步函数都必须转换成Promise,Thenjs则无需转换,像使用CallBack一样执行异步函数即可。 强大的Error机制,可以捕捉任何同步和异步的异步错误。 开启debug模式

CSS三栏布局——定位

这里首先让中间栏绝对定位,两边栏相对定位;这里需要注意的是,如果中间使用绝对定位,不设置宽度的话将会撑不开容器;因此,中间使用了相对定位后,同时设置margin-left和margin-right给左右两栏一定空间,然后左右两栏不管是相对定位还是绝对定位都可以,这里我们使用绝对定位:<!DOCTYPE HTML> <html lang="en-US"> <head&g

初步理解RxJs

         学习是一个由浅入深的过程,如果能够理解并掌握二八原则(帕累托法则),那么我们对知识的学习定会事半功倍,甚至事半多倍。对基础知识的理解决定了对知识理解的深度。RxJs定义        RxJS是ReactiveX在JavaScript上的一个派生。ReactiveX是一个应用比较广泛的响应式

getBoundingClientRect(学习)

最近在学习CK5的时候,学习到了一个Rect的类,这个类主要提供盒子元素定位时候用到的一些值,比如top、left、right、bottom、width、height。而它的实现主要用到了两个方法,其中一个就是:Element.getBoundingClientRect()Element.getBoundingClientRect() 方法返回一个 DOMRect 对象,该对象提供有关元素大小及其