移动端网页项目总结

通过此次项目,对于移动端的网页制作有了初步的了解,同时也对css的布局更为熟练,对响应式布局也有了初步的认识。

在移动端的网页制作中,由于手机的尺寸和分辨率与pc端有较大的出入,故而为了让所制作的网页能够很好地匹配手机,必须在网页的头部设置viewport的值:

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

上面所设的值表示移动端中,移动设备为宽度为750,最大比例为1

设置了上面的值后,我们在制作移动端网页时便可以将所测量的值直接赋予网页的各个模块中。

通常,一个项目中各个网页中会有许多相同或相似的结构,这时,我们可以将这样的网页结构的样式写在公共的样式文件中,在需要时直接在网页中添加相同的类名,这样做可以有效地提高工作效率。

在响应式布局中,我们可以为文档设置字体的大小,如

<html font-size="100px">

。这样一来,在设置其它的模块大小时,我们只需要将其单位写为rem,其值为文档字体大小的相对值。如:

div{2rem;height:2rem;}

div的宽度与高度都设置为了200px

原文地址:https://www.cnblogs.com/wuxiaoshang/p/5816798.html