java培训入门教程-移动端开发适配2种方案总结

一： 第一种方案是：所有的单位使用 rem来适配； 首先在页面上设置 html的 font-size的大小；如下我项目中的设置： html font-size: 100px; media(min-width: 320px) html font-size: 100px; media(min-width: 360px) html font-size: 112.5px; media(min-width: 400px) html font-size: 125px; media(min-width: 640px) html font-size: 200px; html的默认字体大小为 100px；是针对于 320px来设置的，那么在 360px，400px，640px 下都需要等比例缩放；计算公式为： 320px/100 = 360 / x; 那么 x = (360*100 / 320) px; 其他的等比例缩放也是这个意思；那么设计师给的设计稿给我 们的都是默认 640px的设计稿；因此我们可以知道 font-size:200px; 因此我们可以设置 此倍率为 200；想 px转化为 rem的话，只要知道设计稿多少像素，比如图片的高度是 500px；我们需要转换 rem的话，计算公式如下：rem = (500 / 200) rem; 其他的属性也 是一个意思；比如 font-size,margin, padding, 等等属性都是这样计算的 即可转化为 rem；我们使用简单的 less预编译语言进行计算即可；比如想保留 2位小数；可以如下写 xx = round(500rem/200,2); 二：第二种方案是：纯碎使用 px作为单位；(css3 媒体查询如下：) /* 对于 400-450按照 400px来计算 */ media (min-width: 400px) and (max-width:450px) /* 640/400 = 1.6*/ multiple: 1.6; .mixin(multiple); /* 下面可以写一些私有 css属性覆盖掉 */ /* 对于 360-399按照 360px来计算 */ media (min-width: 360px) and (max-width:399px) /* 640/360 = 1.78 */ multiple: 1.78; .mixin(multiple); /* 下面可以写一些私有 css属性覆盖掉 */ /* 对于 320-359按照 320px来计算 */ media (min-width: 320px) and (max-width:359px) /* 640/320 = 2*/ multiple: 2; .mixin(multiple); /* 下面可以写一些私有 css属性覆盖掉 */ /* 下面的 mixin函数是使用 less预编译语言的，里面需要使用到 round方法自动计 算各个值 */ .mixin(multiple) / 比如高度为 500px的话，那么计算公式如下： height: round(500px / multiple,2); / 下面其他的属性值也是一个意思的，设计稿给的多少像素的话，就写多少像素，然后进 行计算即可; 其他的不需要计算的属性可以写在函数外面，这样就有一个缺点，就是你不写在外面， 都写在 mixin函数里面的话，那么在每次调用 mixin函数内都会生成一份代码；代码重复 了；如果我不写在里面的话，在不需要计算的样式都写在外面的话，那么假如很多类的属 性有需要计算的，有不需要计算的，那么就会把一个 css样式分成 2份写，对于代码维护 不太友好；因此如果项目中能使用 rem的话，尽量建议使用第一种方案，使用 rem作为单 位来适配移动端开发； 不过这两种方案都可以达到适配效果 使用 rem作为单位来对手机适配的 demo如下： rem适配方案参考 如上 git代码已经放了 demo，我们可以通过 git 克隆下来即可： 如： git clone /tugenhua0707/remAdapter.git 然后进入使用命令进入该目录后；在本地取个服务器可以运行命令 gulp server -d ；过一些时间会在本地上开启一个服务器；如：http:/localhost:3000/ 但是这样是访问不到页面的；因为我 gulpfile.js代码全部打包到 build文件夹下： 比如项目打包后的路径： build 磨砺营 IT 教育版权所有 css html images js 因此我们可以在 http:/localhost:3000/build/html/ 即可访问到 index.html了； 同时我们可以打开 src源文件下的 html下的 index.html；可以看到 对应 css image图片 使用 PREFIX/images/heart.png 这样的路径来引入的；及 js文件 引入也是通过 PREFIX 作为前缀来引入路径的；这样使用变量做的好处是 可以通过 判断是线上环境还是开发环境，如果是开发环境的话 PREFIX 在打包后，会自动替 换成 http:/localhost:3000/build 这样的，对于线上的环境 可以根据自己的项目的需 要替换成响应的路径即可；这些配置都在 gulpfile.js内可以看得到，使用了 gulp- replace插件进