首页 > 代码库 > 如何设计响应式布局

如何设计响应式布局

1、在meta标签中添加viewport 

<meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no" />

2、 不使用绝对宽度(px),使用相对宽度(%)

3、  不使用绝对文字大小(px),使用相对文字大小(em,rem)

  em相对于父元素字体尺寸比例,rem相对于根元素(html元素)字体尺寸的比例,比如各浏览器默认根元素字体大小为16px,0.75rem就相当于16*0.75=12px。也可以先设置html{font-size:62.5%},设置根元素字体大小为10px,然后再计算各元素的字体大小,如要设置12px就是1.2rem,14px就是1.4rem,25px就是2.5rem,更容易计算。

4、  媒体查询标签

  自适应网页设计的核心,就是CSS3引入的media query模块。它的意思就是,自动探测屏幕宽度,然后加载相应的css文件。

<link rel=”stylesheet” type=”text/css” media=”screen and (max-width:400px)” href=”tinyScreen.css”/>

  上面代码的意思是,如果屏幕宽度小于400像素(max-width:400px),就加载tinyScreen.css文件。

<link rel=”stylesheet” type=”text/css” media=”screen and (min-width:400px) and (max-width:600px)” href=”smallScreen.css”/>

  如果屏幕宽度在400像素到600像素之间,则加载smallscreen.css文件。

5、  图片的自动适应

  除了布局和文本,自适应网页设计还必须实现图片的自动缩放

img{max-width:100%}
img{min-width:100%}

  老版本的IE不支持max-width,所以只好写成img{width:100%}

如何设计响应式布局