Welcome, Old Sport!

响应式设计的技巧贴士

by ilikecss ON 2012/09/13 4168

响应式设计的技巧贴士由于最近一直在做响应式设计的相关工作,网上查询资料和实际操作让我可以在这里为大家分享一些制作心得,灵活运用到网页制作中去还需要大量的练习,因为在制作响应式设计过程中要比之前的页面考虑的更多,测试的范围更广。

不要使用maximum-scale!

在Meta声明里请不要使用maximum-scale=1,因为这将会使您的网页无法缩放。我们需要的是有柔韧性的网页,请使用以下声明:

<meta name="viewport" content="width=device-width, initial-scale=1">

在CSS中可以添加以下新规则:

@viewport {
    width: device-width;
}

使用min-width

根据设计稿会会制定不同的网页宽度,请在设置宽度时候使用最小宽度,而不是硬性规定一个尺寸,这不是响应式设计所需要的。当然这是根据你所制作的项目类别而区分的,如果是移动媒介肯定是要求min-width;如果只是传统的网站可以使用max-width。

请看下面样式,min-width的设置情况下,自动调用@media,这样你可以根据不同尺寸来设置你的CSS来适应各种媒介。

#demo { margin-top: 1em; }     
    @media (min-width: 600px) {
        #demo { margin-top: 2em; }
    }

忘掉PX,替换成百分比

在响应式设计中最重要的就是把以往设定的宽度单位PX替换成百分比使用,因为在百分比的设置下,在你缩放网页的同时,布局会根据不同的宽度而自适应调整,当然字体大小也是如此。(CSS中em代表百分比,当然写成%也可以。)

body { font: 100%/1.5 serif; /* 相当于16px */  }
h1 {  font-size: 2em; /* 相当于32px */ }

文章参考: Five steps to gettin’ flexy in responsive web design

4条评论
  1. #1

    兔斯基的萝卜耶夫说道:
  2. #2

    金刚禅狮子吼说道:

    弹性代码已经开始普及了么!




TOP