如何设计响应式布局

Posted 2020-09-27 寻找薛定谔的猫

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%}