jquery html5 px转成rem_移动端网页总结（flex+rem+flexible）

flex +rem 移 动 端 网 页

1. 新建项目文件夹：

      例如：国美H5

      新建一个项目文件夹-----------  国美H5

      里面新建 css文件： 移动端初始化样式nomal.css   -----  自己的样式index.css

      新建不更换图片的文件夹 ---------- images

      新建常换的图片文件夹 ------------ upload

      新建js文件夹  --------------- flexible.js

      新建首页文件 ------------  index.html

2.  用vsCode打开项目文件夹

进入首页文件index.html ,  先引入css文件   和  js文件

然后进入index.css, 写移动端body的范围及其居中样式：

3 .  测试样式引入是否正确

  在body里面输入  1234  ，运行index.html，打开控制台，用箭头点击body查看body的范围以及查看是否居中显示，在查看控制台中的body标签里面是否显示出flexble.Js划分好的字体大小，若有，则正确，没有则说明js没有引入成功。

4. 确定1rem的值

 用ps打开设计图，必须 测量设计图的总宽度(375)。  然后用这个总宽度除以10(flexble.js划分10等分)，除出来的数就是1rem的数据。

然后再vsCode里面打开设置(Ctrl+,)，点击文本编辑器 ----  字体  ---  在seting.Json中编辑 -----      "cssrem.rootFontSize": 16,   -----  把这个16改成刚才除号的数据

例如：一张设计图的总宽度是375px，那么375 / 10 == 37.5  

那么就在编辑器设置里面把16改成37.5

然后，单位就换算好了，当输入px是就会自动转换为rem为单位

5. 限制缩放范围 

用媒体查询限定当屏幕缩放到多大的时候  body内容不再缩放，这里写的字体大小也是刚才除出来的数字 37.5(因为权重不够需要加important)

6. 开始写页面

写页面的时候和pc端一样，必须测量准每一个盒子的宽高，然后再编辑器里面输入测出来的宽高，就会有自动转成rem出来，就把rem那个写上即可。

例如：测量出头部高度等53px ，那么直接输入53px，自动弹出53px / 37.5之后的值，写上这个即可。

此时，这个盒子已经出现，而且自适应。

至此，准备工作完毕。

总结：