关于移动端实战的一些总结

Posted 2020-08-04

移动板与pc板的布局有什么不同呢？ 我的理解是移动端的布局相对较窄，字体图片等应当较大（为了在手机上的小屏显示清楚），且应当适应一定范围内不同类型的手机。

如何做到自适应的手机布局呢 这次实战我使用了一条新语句：

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

这条语句能让手机适应750px的宽度且不允许放大缩小。

还有上次提出过的媒体查询（终端发生变化时做出相应的样式改变）也能做出自适应的效果。

手机端和pc端不同的还有这里的hover算active的效果。

另外图片精灵（雪碧图）也是有优点与缺点。

优点有节省带宽，配合某些插件能更方便使用。

缺点是背景不能微调（调了容易显示到其他图片） 不能重复 不能使用img显示 等

rem和em也是自适应的利器。

他们可以改变一个数值令其他数值改变。

接下来就是令上一个项目适应pc pd 手机端，希望这次能够更加提升自己的实力。