• 回复: 0
iain 发布于:2016-08-31 19:24:04

网站设计分析:响应式页面的几个关键组成部



作为一个无线部分的人,不懂移动配置是不可的。而作为一个无线的重构,不会写相应式页面更是不可得。而我,一个无线的重构,在我近来做的一个移动真个项目之前,的确是不会写相应式页面的,以是,严格来说,在这个项目之前,我是一个不合格的无线重构人。
而这个项目,却让我快速地驾驭了相应式页面重构的一些方式。下面便是经过过程这个项目来总结我在相应式页面重构学到的东西。
众所周知,所谓相应式页面,便是可以或许用一套样式,使你的页面可以或许在不同分辨率的屏幕下都有很好的表示情势。相应式Web设计,这个见解是Ethan Marctte 在A List Apart 发表的一篇文章“Responsive Web Design”中援引相应式构筑而得名:
根据我所阅读过一些文章及资料,我总结出相应式页面的几个关键构成部分:
1、页面头部的meta申明,可以经过过程viewport meta标签去让你的html页面的的宽度能根据配置分辨率让欣赏器的可视宽度来适应,也可以在这里设置页面的缩放比例等等,这样在成比例的分辨率配置下,就可以更大致地实现相应式。
body,section,button,h1,p,.layer,.downall_btn,.introduce,.playlist,.recom_picbox{font-size:20px;}2、流体布局(fluid grid),所谓的流体布局,着实便是在你pc端实现的页面基础上,将一些元素的宽高由本来的牢固多少像素(px)调解为百分比(%)或字体比例(em) (或布局方面的margin、padding、left、top等以px为单位的值),这也是当前实现相应式布局的两种重要实现方式。
第一种用百分比(%),便因此该元素的父容器的宽高为100%,其他元素的宽高相对于其父容器的比例,只要将详细的像素值相对于他的父容器的一个百分 比折算即可。当然这种方式的换算有点巨大,由于很多相对的宽高折算的百分比系数是带小数的,以是这时间大概要你有充足的耐烦才华实现。
@media screen and (max-width: 400px) {.figure,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。当其父容器字号基准根据不同的分辨率变化的时间,该元素的宽高也能根据这个字号基准成比例的缩放,就能实现相应式变化。

li#f-mycroft {

大膳缦沔的两张实例图我们可以看到,同一个元素,宽高为3.2em*3.2em,在360px分辨率下,由于基准字号为15px,故分析出来的实际尺寸为48px*48px,而在480px分辨率下,基准字号为20px,故实际的尺寸为64px*64px。
3、流体图片(liquid image),在我所体会的很多资猜中,对图片处置这块,如果要使图片能根据分辨率来适应,并且还不失落真,宛如挺困难的。但着实我们不用考虑的那么巨大, 我们要做的只是让图片能根据不同分辨率自适应罢了,我们不管图片会不会由于被拉伸而失落真,由于真的遇到这样的情况,我们可以考虑在不同分辨率下使用不同的 图片,这样就简朴独了。以是让图片尺寸自适应,我们只要不给图片设定详细的宽高尺寸,只要在样式中给该图片一个width:100%,这样图片就能根据它 父容器的尺寸主动调解了。
4、媒体抽芽(media query),这个也是相应式页面的一个关键技术,根据不同的分辨率去调解一些不同的样式。
@media screen and (max-device-width: 480px) {.column {float:none;}}
经过过程膳缦沔的这样媒体抽芽布局,我们可以设定在不同分辨率下选用不同的样式来调解相应式页面。像前面第二点流体布局上,我们使用百分比或字号比例去实现流体布局的时间,第一种方式是可以不用媒体抽芽直接实现流体布局的,便是元素的宽高能自适应不同分辨率屏幕。
但第二种方式用字号比例(em)去实现流体布局的时间,我们就必须要结合媒体抽芽了,由于我们的字号比例是根据基准字号来实现的,便是耸ё仝基准字号一 定的情况下,该元素的大小便是牢固的,而我们要实现该元素尺寸自适应,就只能经过过程调解基准字号来实现了。经过过程媒体抽芽,我们可以让在基准字号font- size在不同分辨率下不一样,这样其子元素相对于该字号的比例em算出来的像素px就不一样了,这样就能实现相应式了。
当然媒体抽芽的成果是根据不同的分辨率适配不同的样式,我们可以经过过程膳缦沔的做法是实现流体布局,还可以经过过程媒体抽芽来细调详细的页面在不同分辨率下的不同表示情势。
在我详细的项目过程中,采取媒体抽芽主如果调解不同分辨率下的基准字号的大小,详细如下面的代码所示:
/* for 800 px width screen */以是我们兼容不同的分辨率的时间,可以先在某个分辨率下,实现美满的重构,然后将全部元素详细的尺寸(px)折算为em(根据父容器的font-size),然后再经过过程媒体抽芽,调解不同分辨率下的基准字号font-size就能实现详细的相应式了。
@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){在Ethan Marctte的Responsive Web Design这篇文章中给出的一个demo中,我们可以看到他的实际代码里:
body,section,button,h1,p,.layer,.downall_btn,.introduce,.playlist,.recom_picbox{font-size:30px;}}
相应式构筑(responsive architecture),物理空间应该可以根据存在于此中的人的情况举行相应。
前面设置通用字号为20px,当分辨率超过我媒体抽芽到的最大屏幕宽度的时间就适配该基准字号,下面别离经过过程媒体抽芽为分辨率为800px和 720px的配置详细调解基准字号,(当然在这里你可以增加更多的样式去调解不同分辨率下的详细表示)使页面在两个分辨率下都能有比力好的表示。可以发 现,在800px的分辨率配置中,我的基准字号设置为33.34px,在720px的分辨率配置下的基准字号为30px。
为什么在800px分辨率下基准字号就为33.34px,在720px分辨率下基准字号为30px呢,这是由于我是先以480px分辨率下基准字号为 20px去实现的,那么在800px或720px下的基准字号就根据配置分辨率的比例去算出。 这里只给出两个分辨率的例子,其他不同分辨率下的实现方式一样。
经过过程膳缦沔的几点关键技术,我们就可以实现详细的相应式页面了。看完这篇文章,是不是感觉相应式页面着实也没有想象中那么难呢?那么,有空本身去尝尝吧,只有本身动手实现后才华真正明白此中的机密哦!!!
扫一扫,关注设计动量,随时参与互动。
我要评论
  • 小糖心