文档章节

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

英强
 英强
发布于 2016/09/29 14:15
字数 1429
阅读 1030
收藏 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分了,就先打住吧。如果可以,下篇博客再探讨一番。

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

© 著作权归作者所有

英强

英强

粉丝 174
博文 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
159
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

没有更多内容

加载失败,请刷新页面

加载更多

深入理解表单脚本系列第二篇——表单字段

本文转载于:专业的前端网站➜深入理解表单脚本系列第二篇——表单字段 前面的话   表单字段又叫表单元素,表示表单所包含控件,如<input>、<select>等。本文将详细介绍表单字段的内容 访问...

前端老手
20分钟前
5
0
前端技术之:常用webpack插件

1、html-webpack-plugin Simplifies creation of HTML files to serve your webpack bundles. 主页地址: https://github.com/jantimon/html-webpack-plugin 安装方法: npm i --save-dev h......

popgis
25分钟前
6
0
IT兄弟连 HTML5教程 HTML5表单 多样的输入类型1

HTML5拥有多个新的表单输入类型,这些新特性提供了更好的输入控制和验证。并不是所有的主浏览器都支持新的input类型,不过我们可以在所有的主浏览器中使用它们,即使不被支持,仍然可以显示为...

老码农的一亩三分地
26分钟前
6
0
规则引擎

解决问题 版本迭代速度更不上业务变化,但是若多个业务同时变化,除了为每个业务设计专属配置项也不利于操作。就想服务接口单纯化,将复杂多变的业务逻辑交给规则引擎,让用户在web端或cs端自...

无极之岚
今天
7
0
OSChina 周三乱弹 —— 欢迎你来做产品经理

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @巴拉迪维 :10多次劲歌金曲获奖,更多叱咤歌坛排名,黎明才应该是四大天王之首,只可惜拍的电影太少。单曲循环一个多月的歌,力荐 《无名份的...

小小编辑
今天
836
11

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部