文章目录关于前置概念视口概念像素设置理想视口方案@media修正动态rem方案2 :第三方flexiblepostcss-pxtorem方案3:js控件rem1像素问题
本文来自个人记录向
前置概念视口概念视觉视口(visual viewport ) :表示可视区域的大小，显示在包含滚动条的window.innerWidth中。 布局视口开发人员根据平台开发时的区域大小(开发画布大小)，在document.documentelement.clientwidth中显示； “理想视口”的视觉视口与布局视口相同。 关于像素物理像素(器件像素) )手机像素分辨率中的像素； 设备独立像素：与开发代码时的像素、也是css像素的设备比(dpr )物理像素/设备独立像素相同，可以在js中获取window.devicePixelRatio； 设置理想视口
使用默认视口开发移动终端时，将显示滚动条。
这意味着，如果此时的默认布局视口为PC侧视口，且切换到移动侧布局模式，则如果默认整体画布的帧大小为980px，则布局视口将变得非常大，而视觉视口将变为必须手动强制进入理想视口。 可以在以下选项卡上设置布局视口和可视视口：
元数据=' viewport ' content=' width=device-width，initial-scale=1，maximum-scale=1，user-scalable=no
因此可以看出，元标签的作用是使画布的宽度等于装置的宽度，变焦值被固定为1，不允许用户变焦，也是固定的。
案例1 @修改@media动态rem使用媒体查询@media修改不同设备大小的rem。 下面偷人写的哈哈。
@ mediascreenand (最小宽度：320 px ) html ) font-size:50px； } @ mediascreenand (最小宽度：360 px ) html ) font-size336056.25px； } @ mediascreenand (最小宽度：375 px ) html ) font-size336058.59375px； } @ mediascreenand (最小宽度：400 px ) html ) font-size336062.5px； } @ mediascreenand (最小宽度：414 px ) html ) font-size336064.6875px； } @ mediascreenand (最小宽度：440 px ) html ) font-size336068.75px； } @ mediascreenand (最小宽度：480 px ) html ) font-size336075px； } @ mediascreenand (最小宽度：520 px ) html ) font-size336081.25px； } @ mediascreenand (最小宽度：560 px ) html ) font-size336087.5px； } @ mediascreenand (最小宽度：600 px ) html ) font-size336093.75px； } @ mediascreenand (最小宽度：640 px ) html ) font-size3360100px； } @ mediascreenand (最小宽度：680 px ) html ) font-size3360106.25px； } @ mediascreenand (最小宽度：720 px ) html ) font-size3360112.5px； } @ mediascreenand (最小宽度：760 px ) html ) font-size3360118.75px； } @ mediascreenand (最小宽度：800 px ) html ) font-size3360125px； } @ mediascreenand (最小宽度：960 px ) html ) font-size3360150px； }如果设计稿宽640px-680px之间还可以，正好1rem=100px，所以开发的时候应该很容易换算，不然就麻烦了。 我会通过这个方案。
场景2 :第三方获得灵活，并通过名为lib-flexible的第三方插件实现rem自适应。
在npminstalllib-flexiblesave main.js上部署。
导入' Li B- flexible '； 注释元标记时，flexible会自动生成相应的元标记并调整布局视口。 同时，html的字体大小将自动设置为屏幕宽度除以10。 也就是说，1rem等于html根节点的字体大小。 如果设计原稿的宽度为750px，则此时1rem为75px。
但是，有问题。 给定设计稿的单位是px，每次写css单位都要自己算出是多少rem，所以还有一个插件postcss-pxtorem
postcss-pxtorem会自动将开发人员编写的px转换为rem单位，无需开发人员自行转换。
安装：
npminstallpostcss-pxto rem-- save-dev附加配置：
然后，css只将小写字母px转换为rem，而不转换大写字母px
方案2开发时还有另一个好处。 无需在意UI设计图是围绕该设备设计的，应该可以为iPhoneX、i6等设计。 我个人开发过demo。 很容易使用。推荐
场景3:js控制rem的方法来自一个名为《前端解决移动端适配的五种方法》的博客。
var designWidth=375； //手动设定设计原稿的宽度var remPx=100； //可以将根元素的字体大小设置为100px，并更改为其他var scale=window.inner width/design width//计算当前屏幕宽度与设计文稿的比例//基于屏幕宽度计算根元素的全宽度此时，在设计原稿宽度为375px时，1rem=100px；
我不知道这个方法能不能在一个工序中使用，我平时就用来快速写demo吧。
像素问题一般来说，我们开发时的布局视口比设计图小。 例如，iphone6的宽度可能为375px，设计稿的宽度可能为750px。 那么，假设设计稿中有1px的挡板，到了开发时的布局视口时，应该根据比例设为0.5px。 很遗憾，即使将css设定为0.5px，效果也与1px相同。 等比缘看起来变粗了。
现在让我们来看看由博客可耐的麦片_撰写的transform: scale ()缩放解决方案。