前端布局之五:响应式布局

2016/11/02 6382
目录
[隐藏]

响应式布局是2010年出现的概念,也是现在越来越常用的一种布局形式,简而言之,使用响应式布局做的网站能适应各种尺寸的屏幕。这种适应说的更原理一些,就是预先设置好各个尺寸屏幕下网站所要呈现的样子代码,所以响应式网站比非响应式网站制作难度要大这是肯定的,但那是程序员的事情。

对老板来说,却是一套系统可以适应多种屏幕,因而能够降低开发成本,以前公司做网站,往往是一套PC端、一套wap端、另外还有app(Andriod、IOS),好几套系统,开发成本自然很高,维护起来也不是很方便。

现在PC和wap端可以用响应式解决方案一次搞定就方便多了,一个网站,用浏览器打开的都是一套系统,自然很方便维护了,那么响应式如何实现呢?

上图的网站就是响应式网站了,大屏幕时就是左边这样的,小屏幕时就是右边这样的,是不是很赞呢,响应式要做的好,要发挥程序员的想象力,是需要多多的练习。

今天我讲的内容是响应式基础教学,是教你怎么用响应式,需要做哪些设置后就变成响应式了,至于要做好响应式,不是今天的讨论范畴,那需要多练多观摩作品。

设置viewport

viewport是什么意思?视窗。这是一个虚拟的视窗,看下面的图:

响应式布局02

在iPhone4手机上也许它是980px的viewport,然后通过某一种比例将980像素的内容等比例压缩到iPhone4这么大小的手机屏幕下:

响应式布局03

换句话说,在iPhone4这么小的屏幕上硬塞下980像素的内容,可想而知,网页的文字图片都会被压缩掉了。

为了防止这种压缩的情况出现,我们首先要设置viewport。如何设置呢?

width=device-width:意思是宽度等于设备宽度,比如iPhone4、iPhone6的设备宽度是不一样的。

initial-scale=1.0:意思是防止屏幕被缩放,保持原样。

user-scalable=no:意思是防止用户手动缩放屏幕,响应式是不需要用户手动缩放的。

自适应布局

用了响应式布局后,页面肯定不能使用定宽定高的布局去设计网页了,要采用自适应布局,前几篇前端布局里讲到过一些自适应布局如何做,比如多列自适应,全屏自适应怎么做?都讲过了,这里就不多说了。

响应式布局04

至于单位,推荐使用rem、em、百分比,不推荐px,给网页元素设置尺寸都需要使用前三种尺寸单位,而不是固定尺寸的px了,这中间涉及到前三种单位和px之间的单位换算,请百度,或者边试边做也是一种方法。

设置媒体查询

比如下面这个布局,就不是能用自适应布局就能实现的了,于是乎就会用到媒体查询:

响应式布局05

如何使用媒体查询呢?代码如下:

总而言之,响应式网站如何做,就是设置这三个要素了,viewport、自适应布局(流式布局)、媒体查询。

分享本文: