文档章节

用百分比布局和媒体查询@media来实现响应式网页的编码

英强
 英强
发布于 2016/09/29 14:15
字数 1429
阅读 1024
收藏 3

开场白

最近在看网页响应式设计方面的书,学习了些响应式网页设计编码方面的皮毛,拿来献丑,也记录下来给自己以后备忘,前端达人路过看到轻喷。

写了这么多年的Java代码,发现现在看前端的书籍反而觉得更有意思。跑偏了,说回正题。

响应式网站设计(Responsive Web design)的理念是:页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。

上面这段是百度百科的一个说法。

对前端涉猎不深,今晚只摘一小点放在台面上来说:怎么让网页对浏览器显示窗口的分辨率大小进行调整?

1. 百分比布局

先上个例子。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>布局</title>
<style type="text/css">
	body {margin: 0 auto; padding: 0;}
	.wrapper {width: 960px; margin: 0 auto;}
	.header {height: 100px; width: 960px; margin-bottom: 10px; background-color: #999;}
	.main {position: relative; margin-bottom: 10px; }
	.article {position: relative; left: 260px; width: 700px; height: 600px; background-color: #555;}
	.nav {position: absolute; left: 0; top: 0px; width: 250px;  height: 400px; background-color: #777;}
	.footer {height: 100px; width: 960px; background-color: #bbb;}
</style>
</head>
<body>
	<div class="wrapper">
		<div class="header">
		</div>
		<div class="main">
			<div class="article"></div>
			<div class="nav"></div>
		</div>
		<div class="footer"></div>
	</div>
</body>
</html>

效果如下图。

这是一个很普通的类似于博客的布局。看样式代码我们发现,这是个固定布局。也是部分程序员在写页面代码时常用的写法。

然而,在这个移动为王的时代,已经是不合时宜了。试想下,你看个网页出现左右滑动滚动条是个什么感觉?改!首先就是将固定布局改为百分比布局。

这里有个很重要的问题,百分比怎么设置?先上代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>布局</title>
<style type="text/css">
	body {margin: 0 auto; padding: 0;}
	.wrapper {width: 100%; margin: 0 auto; max-width: 960px;}
	.header {height: 100px; width: 100%; margin-bottom: 1.041667%; background-color: #999;}
	.main {position: relative; width: 100%; margin-bottom: 1.041667%; }
	.article {position: relative; left: 27.083333%; width: 72.916667%; height: 600px; background-color: #555;}
	.nav {position: absolute; left: 0; top: 0px; width: 26.041667%;  height: 400px; background-color: #777;}
	.footer {height: 100px; width: 100%; background-color: #bbb;}
</style>
</head>
<body>
	<div class="wrapper">
		<div class="header">
		</div>
		<div class="main">
			<div class="article"></div>
			<div class="nav"></div>
		</div>
		<div class="footer"></div>
	</div>
</body>
</html>

对比上面两处代码,可以发现,我把所有的宽度都转换为了百分比,这个百分比值,是通过下面这个公式计算出来的:

目标元素宽度 ÷ 网页最大宽度 = 百分比宽度

为了保证网页的美观,给网页设定了一个max-width: 960px。这一步之后,再把所有的width值都转换为百分比即可。另外,间距也是我们需要考虑到的能响应的点。所以,我把margin-bottom的值也转为了百分比。再看下效果,恼人的左右滚动条不见了,网页在窗口随意变换大小的时候,也能保证布局的美观。

但是,还是有问题。布局没问题,但如果在屏幕只有很小的情况下,还显示这么多元素,是不是不合适?是的!而且没必要。这时,关靠百分比布局是不行的。需要引进一个新的东西:媒体查询@media。

2. 媒体查询@media

媒体查询似乎也有很大一块内容可讲,我们这里讲的还是比较常用的一点。让网页的各个模块能够对浏览窗口的大小进行响应。比如说在小屏幕浏览时,把左边的导航区隐藏,让内容区充满中间一大块区域。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>布局</title>
<style type="text/css">
	body {margin: 0 auto; padding: 0;}
	.wrapper {width: 100%; margin: 0 auto; max-width: 960px;}
	.header {height: 100px; width: 100%; margin-bottom: 1.041667%; background-color: #999;}
	.main {position: relative; width: 100%; margin-bottom: 1.041667%; }
	@media screen and (min-width: 760px) {
		.article {position: relative; left: 27.083333%; width: 72.916667%;}
		.nav {position: absolute; left: 0; top: 0px; width: 26.041667%;}
	}
	@media screen and (max-width: 759px) {
		.article {width: 100%;}
		.nav {display: none;}
	}
	.article {height: 600px; background-color: #555;}
	.nav {height: 400px; background-color: #777;}
	.footer {height: 100px; width: 100%; background-color: #bbb;}
</style>
</head>
<body>
	<div class="wrapper">
		<div class="header">
		</div>
		<div class="main">
			<div class="article"></div>
			<div class="nav"></div>
		</div>
		<div class="footer"></div>
	</div>
</body>
</html>

这个效果有点难展示,如果可以,你可以复制以上代码在浏览器中试运行一次。

上面的代码最大的不同就是我们用了一个@media属性,这个属性怎么用就不解释了,上面代码有个最简单的用法,估计同行们一看就懂。通过这个媒体查询属性,让网页貌似有了点灵性,更体贴了。

总结

以上两个简单的小技巧,让我们网页具备了简单的响应窗口变化的能力。当然,上面所谓的响应,就是把导航区粗暴的隐藏起来。我们完全可以更优雅,比如说隐藏起来的同时,露出一个按钮,点击按钮,用一个华丽的动画效果把导航区show出来,这里需要用到css3里面一个新的属性:transition。这又是一个很有趣的东西,鉴于现在的时间是凌晨1点05分了,就先打住吧。如果可以,下篇博客再探讨一番。

希望上面这点小内容,对看完文章的你有所帮助:-)

© 著作权归作者所有

英强

英强

粉丝 173
博文 29
码字总数 18802
作品 2
深圳
后端工程师
私信 提问
CSS核心内容整理 - (下)

前言 整体来说CSS还是比较容易掌握的,如果你愿意话大量的时间去实践,当然这更像是废话.CSS中有很多细节的东西,没有办法一一拿出来说,所以在整个系列中我就挑出了我认为最重要的CSS内容,所谓最...

顽Shi
2014/05/03
1K
5
从零开始学 Web 之 移动Web(六)响应式布局

大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:http://www.cnblogs.com/lvonve/ CSDN...

Daotin
2018/08/13
0
0
响应式 Web 设计技巧

什么是响应式设计? iOS 和 Android 的发布,智能手机、平板电脑、智能家电等新设备层出不穷,极大便利了我们的生活,但面对形形色色的终端设备,千差万别的屏幕分辨率,给网页设计带来了新的...

凡尘里的一根葱
2015/11/24
158
0
响应式布局的常用解决方案对比(媒体查询、百分比、rem和vw/vh)

我的博客原文地址:原文地址 简要介绍:前端开发中,静态网页通常需要适应不同分辨率的设备,常用的自适应解决方案包括媒体查询、百分比、rem和vw/vh等。本文从px单位出发,分析了px在移动端...

yuxiaoliang
2018/07/02
0
0
读《CSS揭秘》总结一超实用的项目开发技巧

读《CSS揭秘》总结一 前言:文章是看《CSS揭秘》书边看边总结的笔记 目录: 减少重复 1.考虑css值是依赖关系的时候,要用比例代码表达。 2.灵活控制 3.使用currentColor变量简化代码 4.使用i...

bigname22
03/31
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Rust 的 GUI 框架生态概览

本文比较全面比较了目前主流的 Rust 的 GUI 框架的表现。其中 ++ 表示非常好,-- 表示非常差,而 o 表示处于平均水平。 参与对比的框架共有 8 个,详细的比较结果如下: Electron + Neon El...

红薯
18分钟前
3
0
golang微服务框架go-micro 入门笔记2.1 micro工具之micro api

micro api micro 功能非常强大,本文将详细阐述micro api 命令行的功能 重要的事情说3次 本文全部代码https://idea.techidea8.com/open/idea.shtml?id=6 本文全部代码https://idea.techidea8....

非正式解决方案
今天
3
0
Spring Context 你真的懂了吗

今天介绍一下大家常见的一个单词 context 应该怎么去理解,正确的理解它有助于我们学习 spring 以及计算机系统中的其他知识。 1. context 是什么 我们经常在编程中见到 context 这个单词,当...

Java知其所以然
昨天
3
0
Spring Boot + Mybatis-Plus 集成与使用(二)

前言: 本章节介绍MyBatis-Puls的CRUD使用。在开始之前,先简单讲解下上章节关于Spring Boot是如何自动配置MyBatis-Plus。 一、自动配置 当Spring Boot应用从主方法main()启动后,首先加载S...

伴学编程
昨天
7
0
用最通俗的方法讲spring [一] ──── AOP

@[TOC](用最通俗的方法讲spring [一] ──── AOP) 写这个系列的目的(可以跳过不看) 自己写这个系列的目的,是因为自己是个比较笨的人,我曾一度怀疑自己的智商不适合干编程这个行业.因为在我...

小贼贼子
昨天
7
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部