如何做好自适应网页的设计

相关推荐

如何做好自适应网页的设计

　　随着3G的普及，越来越多的人使用手机上网。移动设备正超过桌面设备，成为访问互联网的最常见终端。于是，网页设计师不得不面对一个难题：如何才能在不同大小的设备上呈现同样的网页？以下仅供参考！

　　一、允许网页宽度自动调整

　　首先，在网页代码的头部，加入一行viewport标签。

　　viewport是网页默认的宽度和高度，上面这行代码的意思是，网页宽度默认等于屏幕宽度（width=device-width），原始缩放比例（initial-scale=1）为1.0，即网页初始大小占屏幕面积的100%。

　　所有主流浏览器都支持这个设置，包括IE9。对于那些老式浏览器（主要是IE6、7、8），需要使用css3-mediaqueries.js。

　　二、不使用绝对宽度，不使用绝对大小的字体

　　由于网页会根据屏幕宽度调整布局，所以不能使用绝对宽度的布局，也不能使用具有绝对宽度的元素。指定百分比宽度width: xx%或者width:XXem;

　　使用相对大小的字体em或者rem。一般浏览器的默认字体大小为16px。“em”是一个相对的大小，其参考物指的是相对于元素父元素的font-size。因此，1em总是等于父元素的字体大小。而rem总是相对于根元素的字体大小进行计算的。

　　1.设置百分比时的计算

　　相对于父元素宽度的：[max/min-]width、left、right、padding、margin 等；

　　相对于父元素高度的：[max/min-]height、top、bottom 等；

　　相对于继承字号的：font-size 等；

　　相对于自身字号的：line-height 等；

　　相对于自身宽高的：border-radius、background-size、transform: translate()、transform-origin、zoom、clip-path 等；

　　特殊算法的：background-position（方向长度 / 该方向除背景图之外部分总长度 * 100）、filter 系列函数等；

　　如果自身设置 position: absolute，则相对于离它最近的那个 position 不为 static 的外层元素，如果没有这样的元素，则相对于窗口。

　　如果 position: fixed，“父元素”指视口。

　　margin如果没有加后缀是相对于宽，但是加了后缀，比如margin-left，则是相对于高；

　　2.设置em时的计算

　　元素自身没有设置字号大小时，则默认使用父元素字号大小。元素自身要是设置了字体大小后，则字体计算公式为：

　　需要转换的像素值/父元素的font-size=em值

　　元素的width、height、line-height、margin、padding、border等值转换总是以当前元素的字号大小计算：

　　需要转换的像素值/元素的font-size=em值

　　比如：

　　.outerdiv {

　　font-size: 32px;

　　}

　　.innterdiv {

　　width: 2em; /*64/32=2*/

　　height: 2em;

　　line-height: 2em;

　　padding: 0.5em;

　　}

　　当innterdiv设置font-size的大小时

　　.innterdiv {

　　font-size: 0.5em;/*16/32=0.5*/

　　width: 2em;/*32/16=2*/

　　height: 2em;

　　line-height: 2em;

　　padding: 0.5em;

　　}

　　三、使用流动布局

　　即各个区块的位置都是浮动的，不是固定不变的。当宽度太小，放不下两个元素，后面的元素会自动滚动到前面元素的下方，不会在水平方向overflow（溢出），避免了水平滚动条的出现。

　　四、选择加载CSS

　　"自适应网页设计"的核心，就是CSS3引入的Media Query模块。设置断点时，最好以内容为基础设置，而不是以各种屏幕尺寸来设置。

　　@media screen and (max-width: 1200px) {}

　　@media screen and (max-width: 780px) {}

　　五、图片的自适应

　　使图片的宽度为100%,但是不超过最大宽度400px;

　　img {

　　width: 100%;

　　max-width:400px;

　　}

　　大多数嵌入网页的视频也可这样写：img, object { max-width: 100%;}

　　六、font-size实现自适应

　　使用calc实现字体的自适应。比如要让屏幕宽度在 1553px-1032px 的范围内变化时，font-size大小是在12px-16px之间对应变化，则

　　font-size: calc(0.75em + 4*(100vw - 1032px) / 521);

　　vw 相对于视窗的宽度：视窗宽度是100vw。视窗宽度指浏览器内部的可视区域大小，即window.innerWidth/window.innerHeight大小，不包含任务栏标题栏以及底部工具栏的浏览器区域大小。

　　0.75em可以换成百分比font-size: calc(75% + 4*(100vw - 1032px) / 521);

　　也可换成px单位font-size: calc(12px + 4*(100vw - 1032px) / 521);但是Safari浏览器不支持该写法。

【如何做好自适应网页的设计】上海花千坊相关的文章：

自适应设计与响应式网页设计的区别07-14

Dreamweaver如何制作网页设计07-02