web前端响应式布局

web前端 2019年05月07日 14:12 Norsl 48 0

随着互联网的发展,现在的网站是数不胜数,层出不穷,一个懂点技术的人可能都会有一个网站。但是,同样随着互联网的发展,终端设备也越来越多,比如就像现在的手机,一年一批,快的情况下,半年甚至一两个月都有可能。那么我们的做的网站在这些设备上进行浏览时都会出现什么情况呢?比如已经做好了一个pc网站,我们拿到手机或者平板电脑上进行访问时就各种板块错位,字体很小,还要进行缩放,拖动进行浏览,浏览起来非常费劲。


我们先看下响应式的概念(来自百度百科)

响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。

响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验,而且随着目前大屏幕移动设备的普及,用“大势所趋”来形容也不为过。随着越来越多的设计师采用这个技术,我们不仅看到很多的创新,还看到了一些成形的模式。

更多信息可以参考:百度百科


优缺点

优点:

  • 面对不同分辨率设备灵活性强

  • 能够快捷解决多设备显示适应问题


缺点:

  • 兼容各种设备工作量大,效率低下

  • 代码累赘,会出现隐藏无用的元素,加载时间加长

  • 其实这是一种折中性质的设计解决方案,多方面因素影响而达不到最佳效果

  • 一定程度上改变了网站原有的布局结构,会出现用户混淆的情况


可以看到,早在2010年5月就提出了响应式的这个概念,直到html5+css3的出现响应式才正真的流行了起来。为什么要等到这个时候呢?因为响应式中一个非常重要的东西就是css3里面的Media Query(媒介查询),也是整个响应式布局的核心。


Media Query是什么?

通过不同的媒介类型和条件定义样式表规则。媒介查询让CSS可以更精确作用于不同的媒介类型和同一媒介的不同条件。媒介查询的大部分媒介特性都接受min和max用于表达”大于或等于”和”小于或等于”。如:width会有min-width和max-width媒介查询可以被用在CSS中的@media和@import规则上,也可以被用在HTML和XML中。通过这个标签属性,我们可以很方便的在不同的设备下实现丰富的界面,特别是移动设备,将会运用更加的广泛。


下面通过一个例子,你大概就懂了它的整个流程了

这个例子用到了flex布局(弹性布局),如果不了解的话可以看看我的另一篇文章:https://norsl.cn/blog/57.html

首先,我们写一个pc版的一个布局页面,下面这一句也很重要大概意思就是让你的可视宽度等于你的设备宽度,初始缩放比例为1

<meta name="viewport" content="width=device-width, initial-scale=1.0">


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>响应式布局</title>
</head>
<body>
<style>
*{
	margin:0;
	padding:0;
	border:0;
	color:#fff;
	text-align: center;
}
.header{
	height:60px;
	background: orange;
}
.container{
	margin:10px 0;
	display: flex;
}
.body-left, .body-right{
	width:20%;
	background: orangered;
}
.body{
	width:60%;
	min-height:500px;
	background: #a87283;
}
.list{
	box-sizing: border-box;
	padding:5px;
	background: #222;
	display: flex;
}
.list .item{
	display: inline-block;
	width:20%;
}
.footer{
	height:100px;
	background: #555;
}
</style>
<div class="header">header</div>
<div class="container">
	<div class="body-left">left</div>
	<div class="body">
		<div class="list">
			<div class="item" style="background: red;">item</div>
			<div class="item" style="background: blue;">item</div>
			<div class="item" style="background: yellow;">item</div>
			<div class="item" style="background: pink;">item</div>
			<div class="item" style="background: orange;">item</div>
		</div>
	</div>
	<div class="body-right">right</div>
</div>
<div class="footer">footer</div>
</body>
</html>

浏览效果如下,为了演示就不做的多么高大上了。目前为止,你不管在pc还是在手机或者平板上看到的效果差不多都是一致的。


下面我们做手机端的响应式,在手机上浏览,我们让右边的right隐藏,左边的left让他在header下面,并且最中间的每个item一行都只显示一个。在css的部分下面添加如下代码

@media screen and (max-width:480px){
	.body-right{
		display: none;
	}
	.container{
		flex-wrap:wrap;
	}
	.body-left{
		width:100%;
		margin: 0 0 10px 0;
	}
	.body{
		width:100%;
	}
	.list{
		flex-wrap:wrap;
	}
	.list .item{
		width:100%;
	}
}

里面的css我相信你是可以看得懂的。但是这外面这一层是个什么鬼?他就是响应式的媒介查询,这里的意思就是在屏幕宽度不超过在480的时候就用它里面的这一套css样式。最后你可以改变浏览器窗口的宽度一点一点慢慢缩小,你就可以看到效果了

可以看到,效果和上面我们所想的一模一样。同理,其他分辨率也是这么做的。


超小屏幕(手机)768以下

@media screen and (max-width:768px){
    ...
}


平板电脑 769~992

@media screen and (min-width:769px) and (max-width:992px){
    ...
}


中等屏幕(pc)993~1200

@media screen and (min-width:993px) and (max-width:1200px){
    ...
}


大屏幕(pc)1201以上

@media screen and (min-width:1201px){
    ...
}


大概就是这一些了。最主要的就是通过媒介查询来载入不同的css样式。

以上为个人理解,如有错误的地方希望大家给我说一下。

说点什么吗?

你的电子邮箱地址不会被公开。必填项已用 * 著名

*
*
验证码

Norsl の 个人名片

职业:web开发

现居:四川 成都

Git:https://gitee.com/norsl

邮箱:3136904131@qq.com

最新评论

  • Norsl : 当时都以为凉凉了,不然现在就是空库了
  • LILI : 有惊无险啊哈
  • 林三 : 原谅我每次过来都找不到地方说话,你哪些代码函数太深奥,我确实看不懂呢。
  • 热血学霸 : 感谢大佬分享,好人一生平安
  • 格瑞LILI : 你猜我是从哪看到你的博客的《-_-》
  • 格瑞LILI : 网站名称:格瑞LILI 网站地址:https://kaygb.top 网站描述:个人博客,分享学习生涯遇到的问题
  • zgcwkj : 给力啊!!!谢了
  • 妙文屋 : 写的很好,很喜欢
  • 马也随笔 : 这个记录评论者COOKIE功能挺实用的,有没有插件可以使用的,用的WP。
  • 林三 : 你厉害,我是追不上了,业务的太狠了。