Welcome, Old Sport!

如何正确使用百分比单位?(Responsive Web Design)

by ilikecss ON 2015/02/12 3056

百分比单位在响应式设计的应用Responsive Web Design已经不是一个新的话题了,由于微信在国内的风靡,许多互联网公司都在做针对微信开发的网页设计,微信也是在最近对外发布了最新的SDK开发文档, 这些都表明掌握这些开发技术都是前端工作者必不可少的。然后响应式设计又是其中最基本的一个特性,您是否已经熟练应用了此技巧?又或者你只是个初学者?相信这篇文章会给你带来帮助,今天这里只介绍响应式设计的自适应布局方法。
不要输在起跑线上,在技术领域也是通用的,响应式设计的技术布局有许多种,有粗燥有精细的,初学者如果开始就染上坏习惯,可能对日后操作会带来影响。

响应式设计是一种能在结构上进行灵活改变的设计技巧。如果你只是针对文字图片进行了自适应,整个网站布局在不同分辨率下是没有区别的,那这不是响应式设计。

Media Query

<link rel="stylesheet" type="text/css"
  media="screen and (max-device-width: 320px)"
  href="shetland.css" /> //通过调取css文件形式
@media screen and (max-device-width: 320px) {
  .column {
    width: auto;
  }
} //直接写入css样式 

图像布局和文字适应

在响应式布局中,我们一般采用百分比来进行大小的设置(比如宽度和高度,文字的大小)

.res {
  width: 30.76923076923077%;  /* 200px / 650px */ 
  font-size: 0.75% /* 12px / 16px */ 
}

宽度为650px,字体大小为16px; 相对应的宽度为200px,12px字体的百分比设置。

大家可以掌握这个技术,灵活使用后可以使得容器或字体在不同分辨率下以不同形式排列显示。(比如原本3栏的布局可以自动排列为2栏,在不同Media Query的宽度)百分比的数字是难看了点,但这只是实例针对一些特殊大小。

PS: 关于图像的排版布局,我建议在大分辨率下可以使用一栏显示多个图片; 在较小的分辨率则一栏里减少多张图片排列。

总结:

现在有许多开源的布局框架,比如”bootstrap”就是我现在经常使用的。还有你是否会使用REM? REM和EM有什么区别?在以后的文章中会详细介绍。

像素转换为百分比工具

PX转化为EM的在线工具: http://pxtoem.com/
参考文章: http://alistapart.com/article/responsive-web-design

1条评论
  1. 有空得抽得时间出来改成响应式了的




TOP