关于响应式页面重构的一些关键技术点

时间：2022-05-29 08:21:01 | 来源：网络营销

时间：2022-05-29 08:21:01 来源：网络营销

作为一个网络营销人员，不懂移动设备是不行的。而作为一个站长，不会写响应式页面更是不行得。而我，一个小博主，在我最近做的一个移动端的项目之前，的确是不会写响应式页面的，所以，严格来说，在这个项目之前，我是一个不合格的站长。

而这个项目，却让我快速地掌握了响应式页面重构的一些方法，下面就是通过这个项目来总结我在响应式页面重构学到的东西。

众所周知，所谓响应式页面，就是能够用一套样式，使你的页面能够在不同分辨率的屏幕下都有很好的表现形式。响应式Web设计，这个概念是Ethan Marctte 在A List Apart 发表的一篇文章“Responsive Web Design”中援引响应式建筑而得名：响应式建筑（responsive architecture），物理空间应该可以根据存在于其中的人的情况进行相应。

根据我所阅读过一些文章及资料，我总结出响应式页面的几个关键组成部分：

1、页面头部的meta说明

可以通过viewport meta标签去让你的html页面的的宽度能根据设备分辨率让浏览器的可视宽度来适应，也可以在这里设置页面的缩放比例等等，这样在成比例的分辨率设备下，就可以更简单地实现响应式。

<meta name=“viewport” content=“width=device-width， initial-scale=1.0”>

2、页面宽度问题

主要内容部分，目前PC端页面主要的分辨率一般都在960以上：960、1000、1200等，这些都属于正常的尺寸，但也有设计师做出类似973、1011等奇葩尺寸，这个问题我不太好意思拿出来聊，太低级了。

当然，奇葩的单数行高、相同元素不同大小等等这都是属于相似问题。

3、毛边问题

一个方方正正的按钮，带着一圈毛边。这个问题也是在重构中经常看到的事情，虽然这个在写页面的时候可以很轻易的避开这个问题，但是不是看着很不爽？看下图：

正常边给人的感觉整齐干净，毛边显得边缘模糊不清，并且容易造成按钮高度不明确。假如是半透明按钮需要切图的时候，还会造成图片体积变大，所以这个问题应当避免。

4、图层模式

有些设计图中，某个元素例如某个按钮，需要切png半透明图片，但是这个按钮居然跟背景图是正片叠底或者颜色叠加。每当我遇到这个问题的时候会有一股想自杀的冲动，所以为了世界和平，这个问题一定要避免。

5、图层链接

页面重构的某些时候需要选择某些图层进行移动，结果一动发现坏了，好多其它的元素跟着刷刷移动，瞬间感觉无力，默默的一个个取消图层链接。不需要的图层链接，能取消就取消吧！

6、某些图片的尺寸

例如在某些列表中，缩略图的尺寸，经常会遇到119*73等等奇怪的尺寸，其实这种最好是用整数：120*80等，对页面的栅格化、响应式以及后台裁图存图等都有很大的好处。

7、奇葩的边距和填充

同等级的模块，从视觉及内容上都属于同一类型，但上下边距一个20px，一个27px；左右填充一个10px，一个7px，这种问题跟页面宽度问题类似，都属于低等级问题。

8、图片确实是响应式设计的一大问题

图片分为背景图片和通过img标签引入的图片，前者可以通过media query自动的切换不同分辨率的版本，但是在不支持background image size的浏览器中背景图片无法无级的调整大小（也就是在media query切换css的点上可以换一张不同分辨率的图，但是没法儿获得两张分辨率中间大小的版本），而且在很多情况下（比如cms中）并不适合用背景图片。

如果是img标签引入的图片，可以使用延迟加载的方式来加载，在实际加载图片之前先用js检查窗口宽度，然后加载不同分辨率的图片，比如宽度<=480,就加载80px宽度的图片，480 < 宽度 <= 768，加载120px的图片，宽度> 768则加载160px的图片，如果宽度是600px怎么办呢？通过百分比来缩放120px的图片达到合适的结果。

这样做的好处是对于移动设备来说，下载的图片会小一些，减少网页加载的时间。但是问题是竖屏向横屏切换或者扩大浏览器窗口宽度时图片会由于放大而产生一定的模糊感。

我觉得响应式设计中对于图片的考虑应该从布局设计就开始，尽量使图片在各个窗口宽度下的尺寸不要相差过大，通过排布更多的内容而不是扩大图片的尺寸来填充由于浏览器窗口扩大带来的空间，这样可以有效的减少图片放大模糊的问题（具体可查看亿企邦《响应式网页图片库设计的基本规则和技巧》的相关介绍）。

9、不做极限设计

假如要设计一个按钮，放在某个比较小的模块里，那么请考虑一下按钮包含的字数最长的情况下是怎样的。

再比如一个类似微博名片的东西的简介，设计图中做了30个字，那么请考虑下100个字的情况。假如需要做截字，请规定多少字或者几行字开始截，不要让前端去猜。

10、css3圆角还是切图圆角？css3投影还是切图投影？

在遇到这种纠结的时候，请联系设计师以及产品经理，讲明两种方式的优劣，这个问题可延展到其它类似css3实现效果的问题。

11、切勿各种宽度写死，各种切大图啪啪啪

前者会导致，只要编辑或者数据与设计图中的不一样，你的页面效果就完全“不一样”了，做页面重构怎么算优秀?最大程度的模块化、最大程度的模块可移植性、最大程度的自适应性、各种极限情况的考虑。也就是你考虑的情况越多，自适应性越强，你的代码越健壮。

后者会导致啥？后台或者编辑拿着刀子捅你！！！

12、字体问题

假如一段需要后期编辑或者拿数据的文字内容，设计图里是一个特殊字体，例如：“方正兰亭西黑”，你自己电脑上有，其他人电脑上没有，然后你直接在css样式里用了这个字体会有啥结果！

遇到这种情况最重要的是需要跟设计商议，替换成安全字体，例如：微软雅黑、宋体、黑体、Arial等，假如设计死活不同意，讲道理，再不同意，叫上产品经理一起讲这个问题（具体可查看亿企邦《基于页面易读性的文字编排设计要点》的相关介绍）。

13、流体布局（fluid grid）

所谓的流体布局，其实就是在你pc端实现的页面基础上，将一些元素的宽高由原来的固定多少像素（px）调整为百分比（%）或字体比例（em）（或布局方面的margin、padding、left、top等以px为单位的值），这也是当前实现响应式布局的两种主要实现方法。

第一种用百分比（%），就是以该元素的父容器的宽高为100%，其他元素的宽高相对于其父容器的比例，只要将具体的像素值相对于他的父容器的一个百分比折算即可。当然这种方法的换算有点复杂，因为很多相对的宽高折算的百分比系数是带小数的，所以这时候可能要你有足够的耐心才能实现。

在Ethan Marctte的Responsive Web Design这篇文章中给出的一个demo中，我们可以看到他的实际代码里：

@media screen and （max-width： 400px） {
.figure，
li#f-mycroft {
margin-right： 3.317535545023696682%; /* 21px / 633px */
width： 48.341232227488151658%; /* 306px / 633px */ }

第二种方法是用字号比例（em）去实现，其实方法是跟上面一样的，只不过我们将%换成了em，这种方法就是某元素具体的宽高（px）在当前基准字号（font-size）下折算出多少个em。eg：一个在480分辨率下宽高为64px*64px的元素，其父容器的字号（font-size）为20px，那么它折算成em为单位就是3.2em*3.2em。当其父容器字号基准根据不同的分辨率变化的时候，该元素的宽高也能根据这个字号基准成比例的缩放，就能实现响应式变化。



从上面的两张实例图我们可以看到，同一个元素，宽高为3.2em*3.2em，在360px分辨率下，因为基准字号为15px，故解析出来的实际尺寸为48px*48px，而在480px分辨率下，基准字号为20px，故实际的尺寸为64px*64px。

14、流体图片（liquid image）

在我所了解的很多资料中，对图片处理这块，如果要使图片能根据分辨率来适应，而且还不失真，好像挺困难的。

但其实我们不用考虑的那么复杂，我们要做的只是让图片能根据不同分辨率自适应罢了，我们不管图片会不会因为被拉伸而失真，因为真的遇到这样的情况，我们可以考虑在不同分辨率下使用不同的图片，这样就简单多了。

所以让图片尺寸自适应，我们只要不给图片设定具体的宽高尺寸，只要在样式中给该图片一个width：100%，这样图片就能根据它父容器的尺寸自动调整了。

15、媒体查询（media query）

这个也是响应式页面的一个关键技术，根据不同的分辨率去调整一些不同的样式。

@media screen and （max-device-width： 480px） {
.column {
float:none;
}
}

通过上面的这样媒体查询结构，我们可以设定在不同分辨率下选用不同的样式来调整响应式页面。像前面第二点流体布局上，我们使用百分比或字号比例去实现流体布局的时候，第一种方法是可以不用媒体查询直接实现流体布局的，就是元素的宽高能自适应不同分辨率屏幕。

但第二种方法用字号比例（em）去实现流体布局的时候，我们就必须要结合媒体查询了，因为我们的字号比例是根据基准字号来实现的，就是说在基准字号一定的情况下，该元素的大小就是固定的，而我们要实现该元素尺寸自适应，就只能通过调整基准字号来实现了。

通过媒体查询，我们可以让在基准字号font-size在不同分辨率下不一样，这样其子元素相对于该字号的比例em算出来的像素px就不一样了，这样就能实现响应式了。

所以我们兼容不同的分辨率的时候，可以先在某个分辨率下，实现完美的重构，然后将所有元素具体的尺寸（px）折算为em（根据父容器的font-size），然后再通过媒体查询，调整不同分辨率下的基准字号font-size就能实现具体的响应式了。

当然媒体查询的功能是根据不同的分辨率适配不同的样式，我们可以通过上面的做法是实现流体布局，还可以通过媒体查询来细调具体的页面在不同分辨率下的不同表现形式（具体可查看亿企邦《如何改善网页文字的阅读体验》的相关介绍）。

在我具体的项目过程中，采用媒体查询主要是调整不同分辨率下的基准字号的大小，具体如下面的代码所示：

body，section，button，h1，p，.layer，.downall_btn，.introduce，.playlist，.recom_picbox{font-size:20px;}
/* for 800 px width screen */
@media only screen and （max-device-width:800px），only screen and （max-width:800px）{
body，section，button，h1，p，.layer，.downall_btn，.introduce，.playlist，.recom_picbox{font-size:33.34px;}
}
/* for 720 px width screen */
@media only screen and （max-device-width:720px），only screen and （max-width:720px）{
body，section，button，h1，p，.layer，.downall_btn，.introduce，.playlist，.recom_picbox{font-size:30px;}
}

前面设置通用字号为20px，当分辨率超过我媒体查询到的最大屏幕宽度的时候就适配该基准字号，下面分别通过媒体查询为分辨率为800px和720px的设备详细调整基准字号，（当然在这里你可以增加更多的样式去调整不同分辨率下的具体表现）使页面在两个分辨率下都能有比较好的表现。

可以发现，在800px的分辨率设备中，我的基准字号设置为33.34px，在720px的分辨率设备下的基准字号为30px。

为什么在800px分辨率下基准字号就为33.34px，在720px分辨率下基准字号为30px呢，这是因为我是先以480px分辨率下基准字号为20px去实现的，那么在800px或720px下的基准字号就根据设备分辨率的比例去算出。 这里只给出两个分辨率的例子，其他不同分辨率下的实现方法一样。

通过上面的几点关键技术点，我们就可以实现具体的响应式页面了，看完这篇文章，是不是觉得响应式页面其实也没有想象中那么难呢？那么，有空自己去试试吧，只有自己动手实现后才能真正理解其中的奥秘哦！

亿企邦点评：

单纯的页面重构，所涉及到的工作内容一般是“分析设计稿>切图>写HTML和CSS”，虽然看起来很少，但要做好这份工作，绝非所想的那么容易。原因很简单：工作内容单一，在时间和工作量上必会很苛刻，往往跟设计师的工作时间是3:1，即设计师给三天的时间，制作只给一天的时间完成。

在这种工作强度下，很多人都是靠着对这份工作的喜爱在维持着，一旦工作热情消失，很容易就会变得枯燥，保持热情也成了重构工作者（也许是所有参加工作的人）应该具备的能力。