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

缺乏、安全感 2022-05-16 06:29 271阅读 0赞

作为后端程序员，前端的东西就只会一些基本的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/][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过后的文件。  
编译前后效果图：  
![在这里插入图片描述][2018112112012662.png]  
编译后：  
![在这里插入图片描述][20181121160652595.png]  
7、你的手机端html中引入A.debug.css这个文件看效果.8，你会发现，效果不对，完全变小了。效果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0VzY19UYWJfRW5k_size_16_color_FFFFFF_t_70]  
是因为你没有设置html标签的字体大小。好像是因为rem会更具html的font-size来变换。而font-size又需要根据不同机型的分辨率来获取。所以我们需要在html的head那里加一段。内容如下：

@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 * /}}

效果图如下：  
![这里写图片描述][70]  
9、然后再查看效果，就会发现比刚才效果好一点，但是还是偏差很大。这时候我们需要使用一个。，px2rem有一个参数-u。用来设置rem的单位。就是1rem等于多少px，默认是75。但是明显默认值不对。

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

![这里写图片描述][70 1]  
最终效果：

![这里写图片描述][70 2]  
就是还有个问题。如果不需要转成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][https_www.npmjs.com_package_px2rem]

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

[https_nodejs.org_zh-cn]: https://nodejs.org/zh-cn/
[2018112112012662.png]: /images/20220516/263e7671b34d4430a0eee72471105344.png
[20181121160652595.png]: /images/20220516/bce1db11c4c9447f864442350b913117.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0VzY19UYWJfRW5k_size_16_color_FFFFFF_t_70]: /images/20220516/4088ed064e48431692c9f462503bca76.png
[70]: /images/20220516/15a26b63748b40cc9dc9cfc20cd488e6.png
[70 1]: /images/20220516/e55b30b27c7a433894400ee768f5060c.png
[70 2]: /images/20220516/241dd84cd98242a59bb85fda00017cb5.png
[https_www.npmjs.com_package_px2rem]: https://www.npmjs.com/package/px2rem
[http_www.schoolpi.cn]: http://www.schoolpi.cn