移动端rem适配具体怎么实现,

　　拿到设计稿后，如何还原版面？

　　如果只需要做不精确的响应式设计，那么用媒体查询来实现就可以了。如果需要准确还原设计稿，通常通过缩放来实现。常见的方案是基于视口和基于rem的缩放方案。

　　1 viewport 缩放方案

　　在移动端，可以通过viewport缩放页面大小比例来达到目的。

　　简单来说，所有的宽度和高度像素都与可视文档输出相同，然后视口由页面宽度与可视文档宽度的比值动态设置。缩放方案核心代码参考：

　　(function(){ var docEl=document . document element；var is mobile=window . is mobile/Android webOS iPhone iPad iPod BlackBerry ie mobile Opera Mini Mobi/I . test(navigator . user agent)；函数set scale(){ var page scale=1；if (window.top！==window){ return page scale；} var width=docel . client width 360；var height=docel . client height 640；If (width/height=360/640) {//高优先级page scale=height/640；} else { page scale=width/360；} var content=width= 360 ，initial-scale= pageScale ，maximum-scale= pageScale ，user-scalable=no ；document . getelementbyid( viewport )。setAttribute(content ，内容)；window . page scale=page scale；} if(is mobile){ set scale()；} else { docel . class name=" PC "；}})()该方案已于去年在我们的H5活动页面设计中付诸实践。

　　但如果要在PC上显示，由于没有视口的缩放概念，只能设置为固定值，这样的效果并不理想。

　　2 rem 布局适配方案

　　Rem布局适配方案被提及的次数更多，在各大互联网企业的产品中被广泛使用。

　　简单来说，方法就是：

　　根据设计稿与设备宽度的比例，动态计算并设置html根标签的字体大小；在css中，设计草图元素的宽度、高度和相对位置的值按照相同的比例转换成rem值；设计中字体以px为单位，通过媒体查询略有调整。我们举个例子来说明。

　　2.1 动态设置 html 标签 font-size 大小

　　第一个问题是html标签字体大小的动态计算。要看转股比例是怎么约定的。以页宽十等分为例。核心代码是指：

　　(function(WIN){ var set fontsize=WIN . set fontsize=function(_ width){ var docEl=document . document element；//获取当前窗口的宽度var width=_ width docel . client width；//docEl.getBoundingClientRect()。宽度；//按1080 if (width 1080) {width=1080 if大于1080px} var rem=width/10；console . log(rem)；docel . style . font size=rem px ；//部分机型上的错误及兼容性处理var actual size=win . getcomputedstyle parse loan(win . getcomputedstyle(Docel)[ font-size ])；if (actualSize！==rem actualSize 0 math . ABS(actualSize-rem)1){ var rem scaled=rem * rem/actualSize；docel . style . font size=rem scaled px ；} } var定时器；//函数节流function DBC refresh(){ clear time out(timer)；timer=setTimeout(setFontSize，100)；}//窗口更新动态改变字体大小win.addeventlistener (resize ，DBC刷新，false)；//显示页面时计算一次win.addeventlistener (pageshow ，function(e){ if(e . persistent){ DBC刷新()}}，false)；set fontsize()；})(window)另外，对于全屏显示的H5活动页面，对长宽比有要求，此时要进行调整。您可以这样做：

　　function adjust warp(warpId= # warp ){//if(window . is mobile)return；const $ win=$(window)；const height=$ win . height()；let width=$ win . width()；//考虑导航条if(宽/高360/600){ return；} width=math . ceil(height * 360/640)；$(warpId)。css({ height，width，postion:相对，top: 0，left:自动，margin: 0自动 })；//recalculate rem window . set fontsize(width)；}按照这种缩放方式，几乎可以在任何设备上实现比例缩放的精确布局。

　　2.2 元素大小取值方法

　　第二个问题是元素大小的值。

　　以1080px的设计稿宽为例。我们把宽度分成10等份，方便换算，那么1rem=1080/10=108px。转换方法是：

　　const px2rem=function(px，rem=108){ let rem val=parse float(px)/rem；if(type of px=== string px . match(/px $/)){ rem val= rem ；}返回remVal}比如设计稿中有一张图片，尺寸为460x210，相对页面位置为top:321 px；左：70；根据上面的转换方法，这个元素的最终css样式应该是：img_demo { position:绝对；背景-尺寸：封面；背景-图像：URL( demo . png )；top:2.97222 rem；左：0.64814雷姆；宽度：4.25926雷姆；身高：1.94444雷姆；}2.3 rem 布局方案的开发方式

　　通过以上方法，实现了rem布局方案。但是人工计算rem的值显然是不现实的。

　　有了less/sass预处理工具，我们只需要设置mixins方法，然后根据设计稿的实际大小取值即可。以少为例。混合指以下内容：

　　//px to rem.pX2rem (@ px，@ attr: width ，@ rem:108 rem){ @ { attr }:(@ px/@ rem)；}.px2remTLWH(@top，@left，@width，@height，@rem: 108rem) { .px2rem(@top，top，@ rem)； px2rem(@left，left，@ rem)； px2rem(@width，width，@ rem)； px2rem(@height，height，@ rem)；}对于前面的示例元素，css样式可以写成这样：img_demo { position:绝对；背景-尺寸：封面；背景-图像：URL( demo . png )； px2remTLWH(321，70，460，210)；}这里宽度和高度可以通过设计稿输出的图片元素大小直接读出；在Photoshop中移动参考线定位元素，可以快速获得top/left的值。

　　2.4 字体使用 px 为单位

　　使用字体的rem比例缩放时，显示会出现问题。你只需要使用媒体查询来设置几个尺寸。

　　示例：

　　//font responsive @ mediascreenand(max-width:321 px){ body { font-size:13px；} } @媒体屏幕和(最小宽度：321px)和(最大宽度：400 px){ body { font-size:14px；} } @媒体屏幕和(min-width:400 px){ body { font-size:16px；}}以上是本文的全部内容。希望对大家的学习有帮助，也希望大家多多支持。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。