全国免费咨询热线:

400-611-9921

 
关于响应式页面设计

2015-11-19

1198

作为一个无线部门的人,不懂移动设备是不行的。而作为一个无线的重构,不会写响应式页面更是不行得。而我,一个无线的重构,在我最近做的一个移动端的项目之前,的确是不会写响应式页面的,所以,严格来说,在这个项...

关于响应式页面

作为一个无线部门的人,不懂移动设备是不行的。而作为一个无线的重构,不会写响应式页面更是不行得。而我,一个无线的重构,在我最近做的一个移动端的项目之前,的确是不会写响应式页面的,所以,严格来说,在这个项目之前,我是一个不合格的无线重构人。

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

众所周知,所谓响应式页面,就是能够用一套样式,使你的页面能够在不同分辨率的屏幕下都有很好的表现形式。响应式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、流体布局(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。

  • 3、流体图片(liquid image),在我所了解的很多资料中,对图片处理这块,如果要使图片能根据分辨率来适应,而且还不失真,好像挺困难的。但其实我们不用考虑的那么复杂,我们要做的只是让图片能根据不同分辨率自适应罢了,我们不管图片会不会因为被拉伸而失真,因为真的遇到这样的情况,我们可以考虑在不同分辨率下使用不同的图片,这样就简单多了。所以让图片尺寸自适应,我们只要不给图片设定具体的宽高尺寸,只要在样式中给该图片一个width:100%,这样图片就能根据它父容器的尺寸自动调整了。
  • 4、媒体查询(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下的基准字号就根据设备分辨率的比例去算出。 这里只给出两个分辨率的例子,其他不同分辨率下的实现方法一样。

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


关注我们:在查找公众号中搜索:zomsky1688,或者扫描下方二维码快速关注。
广州市纵天信息科技有限公司公众号
关键词:广州网站建设,广州网站设计公司,移动网站建设
热门标签
房地产网站建设汇景网站建设汇景网站开发汇景控股新能源网站开发新能源网站制作奥动新能源网站建设奥动官网网站改版石油公司网站建设广州网站搭建广州市网站制作生物网站建设珠海方正官网建设方正官网建设日本YKK官网建设骏丰频谱官网建设斯帝罗兰官网建设高新兴官网建设三盟科技官网建设赛立信官网建设福美控股官网建设德国商会官网建设皇朝家具官网建设皇朝定制官网建设百利官网建设广芯微官网建设物联网网站建设芯片网站建设网站开发日本YKK官网百利网站建设办公家具网站建设广州建站公司广州做网站营销型网站建设柏洪集团网站集团网站建设新元素网站教育网站德胜教育集团德国商会网站建设品牌网站建设赛立信网站建设智能家居网站运动网站建设贸易网站建设玩具网站建设化工网站建设日化网站建设家电网站建设音响网站建设物流网站建设旅游网站建设酒店网站建母婴网站建设珠宝网站建设钟表网站建设培训网站建设教育网站建设建材网站建设装饰网站建设机械网站建设美妆网站建设展览网站建设皮具网站建设五金网站建设仪器网站建设照明网站建设水电网站建设咨询网站建设法律网站建设家具网站建设家居网站建设服装网站建设服务网站建设食品网站建设金融网站建设餐饮网站建设环保网站建设政府网站建设科技网站建设地产网站建设医药网站建设数码网站建设营销型网站广州网站制作广州网站建设公司建网站广州网站设计公司建站优必思官网英文版网站定制网站广州网站建设中服装网站设计服装网站制作防火板网站大数据网站科技网站制作物联网网站人工智能网站防火板网站制作家居网站制作枕头网站电器网站制作电器网站家具网站家居网站网站建设公司​手机网站建设响应式网站企业官方网站网站策划官网改版企业网站建设网站制作网站设计建站公司网站建设公司企业网站网站建设费用网站建设广州企业网站建设企业建站官网建设广州建站广州网站建设纵天科技
点击展开
关于纵天
广州市纵天信息科技有限公司成立于2008年,是中国领先的整合式互联网应用服务商。12年专业历程,坚持以科技创新为先导的网络服务,服务超过8000+知名品牌与创新客户,涉及网站设计、APP应用开发、微信开发、平面设计、视频拍摄、互联网整合营销等多个领域。
微信咨询
官方微信
联系方式

地址1:广州市天河区珠江新城邦华环球广场16F

地址2:杭州市滨江区滨安路1190号智汇中心B308

业务 QQ: 3561401262

E-mail: sales@zomsky.com

电话咨询 在线咨询 QQ咨询 官方微信
官方微信
TOP

立即与纵天项目顾问通话

400-611-9921

您也可以咨询我们的在线客服或预约资深顾问

信息保护中,请放心填写
关闭