后端程序员如何使用px2rem简单实现移动端自适应html方式

作为后端程序员，前端的东西就只会一些基本的html、css、JavaScript。突然我要做一个手机上的html。需要实现响应式，适应不同分辨率的手机，这个是一个让我头大的问题。在网上找了好久，都说用什么vue+px2rem或者是fix3+px2rem。前端的框架很少用，根本一时间来不及学那些了。于是请教了一下前端的朋友，他说就用px2rem就行了很简单。于是琢磨了一下午。把过程贴一下。

①原理：px2rem是一个工具，用这个工具读css文件，将文件中的px单位转换为rem单位。当然是合理的转换。（网上也有些人贴了手写的几行转换操作的js，我觉得不是很可靠）
②步骤：先安装px2rem这个工具，再用这个工具对我们已经调好的CSS文件进行编译。（安装px2rem的前提是要先安装node.js+npm）。
1、去官网下载：https://nodejs.org/zh-cn/ 安装文件。
2、安装下载好的node.msi安装包
3、打开cmd窗口录入：node -v查看版本信息，是否安装成功，再试npm -v查看npm版本信息。
4、信息无误过后，安装px2rem。在cmd中执行命令过后自动下载安装：npm install -g px2rem
5、安装好过后就可进行css文件的编译了。还是在CMD中执行编译命令：px2rem -o build src/*.css。其中-o表示输出，build是输出目标一个文件夹，可以自定义。后面的css就是你的文件了。
6、如果你的文件叫A.css，那么编译过后，会出现一个build文件夹，里面会有一个A.debug.css文件。这个文件就是转成了rem过后的文件。
编译前后效果图：！[ 这里写图片描述] （https://img-blog.csdn.net/20180816221306183?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0VzY19UYWJfRW5k/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70）！[这里写图片描述]（https://img-blog.csdn.net/20180816221321415?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0VzY19UYWJfRW5k/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA---/dissolve/70） 7 ,,,你的手机端html中引入A.debug.css这个文件看效果.8，你会发现，效果不对，完全变小了。效果如下：！[这里写图片描述]（

https://img-blog.csdn.net/20180816221410420?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0VzY19UYWJfRW5k/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70）

是因为你没有设置HTML标签的字体大小。好像是因为REM会更具HTML的字体大小来变换。而字体大小又需要根据不同机型的分辨率来获取。所以我们需要在HTML的头那里加一段内容如下：

@media(min-device-width:320px){html{font-size: 32px;/*no*/}}

@media(min-device-width:360px){html{font-size: 36px;/*no*/}}

@media(min-device-width:375px){html{font-size: 37.5px;/*no*/}}

@media(min-device-width:384px){html{font-size: 38.4px;/*no*/}}

@media(min-device-width:412px){html{font-size: 41.2px;/*no*/}}

@media（min-device-width：414px）{html {font-size：41.4px; / * no * /}} @media（min-device-width：480px）{html {font-size：48px; / *没有* /}} @media（min-device-width：540px）{html {font-size：54px; / * no * /}} @media（min-device-width：560px）{html {font-size：56px; / * no * /}} @media（min-device-width：600px）{html {font-size：60px; / * no * /}} @media（min-device-width：768px）{html {font-size：76.8px; / * no * /}} @media（min-device-width：800px）{html {font-size：80px; / * no * /}} @media（min-device-width：1080px）{html {font-size：108px; / * no * /}} @media（min-device-width：1280px）{html {font-size：128px; / * no * /}} @media（min- device-width：1440px）{html {font-size：144px; / * no * /}} @media（min- device-width：1600px）{html {font-size：160px; / * no * /}}``` 效果图：























![这里写图片描述](https://img-blog.csdn.net/20180816221528105?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0VzY19UYWJfRW5k/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70)
9、然后再查看效果，就会发现比刚才效果好一点，但是还是偏差很大。这时候我们需要使用一个。，px2rem有一个参数-u。用来设置rem的单位。就是1rem等于多少px，默认是75。但是明显默认值不对。

10、然后就需要重新编译文件，带上参数：px2rem -u 50 -o build src/*.css。
这里的50是随便写的，你可以先试大于75的值看看效果，如果不对，就试试小于75的值。我这里是小于75的值才适合。最好我的参数设置为42，几乎接近我原稿样式。并且在不同分辨率下都 能保持很好的效果。
参数测试：

![这里写图片描述](https://img-blog.csdn.net/20180816221610567?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0VzY19UYWJfRW5k/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70)
最终效果：

![这里写图片描述](https://img-blog.csdn.net/20180816221644405?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0VzY19UYWJfRW5k/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70)
就是还有个问题。如果不需要转成rem的px单位，比如border边框不需要转，那么需要在后面加上/*no*/。例如：

.selector {
width: 150px;
height: 64px; /px/
font-size: 28px; /px/
border: 1px solid #ddd; /no/
}
“`

详细可看网址：

https://www.npmjs.com/package/px2rem

最终效果还是有点偏差，反正就是这样调整就是了。对了我写的这个网站地址是：http://www.schoolpi.cn。用机会可以看看。

后端程序员如何使用px2rem简单实现移动端自适应html方式

猜你喜欢