rem移动端布局怎么适配IOS和Android

最新推荐文章于 2024-02-17 18:50:22 发布

置顶

VIP文章 weixin_41809141

最新推荐文章于 2024-02-17 18:50:22 发布

阅读量4.8k

点赞数 2

文章标签： rem移动端布局怎么适配IOS和Android

本文链接：https://blog.csdn.net/weixin_41809141/article/details/80940517

版权

rem移动端布局怎么适配IOS和Android

昨天“佬大”问我做的h5页面在ios上面显示正常，但是Android就变惨不忍睹了，于是我又开始了度量之路，几个小时过去了......“佬大”问好了没。我说：“还没”那你还是问下“俊伟”吧，果然一问牛逼的同事，迎刃而解的快感你感受到了没。做为一个程序员一定要学会问问问。

我当时用的是这种方式

     <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" id="vp" />
    <script type="text/javascript">
    // 把尺寸放大N倍（N是window.devicePixelRatio）
    var wd = document.documentElement.clientWidth*window.devicePixelRatio/10;
    //物理像素*设备像素比=真实像素
    document.getElementsByTagName("html")[0].style.fontSize = wd + "px";
    // 把屏幕的倍率缩小到N分之一（N是window.devicePixelRatio）
    var scale = 1/window.devicePixelRatio;
    var mstr = 'initial-scale='+ scale +', maximum-scale='+ scale +', minimum-scale='+ scale +', user-scalable=no';
    document.getElementById("vp").content = mstr;
    </script>

只能兼容ios,android失效

在实际项目开发中，我有用到的两种比较有效的方式（兼容ios和Android）

方法一：

案例实战

了解Flexible相关的知识之后，咱们回到文章开头。我们的目标是制作一个适配各终端的H5页面。别的不多说，动手才能丰衣足食。

创建HTML模板

<!DOCTYPE html>

<head>

meta content="yes" name="apple-touch-fullscreen">

</head>

</html>

正如前面所介绍的一样，首先加载了Flexible所需

这个时候可以根据设计的图需求，在HTML文档的<body></body>中添加对应的HTML结构

这仅是一个示例文档，大家可以根据自己风格写模板。

为了能更好的测试页面，给其配置一点假数据：

//define data
var pageData = {
    sections:[{
        "brannerImag":"http://xxx.cdn.com/B1PNLZKXXXXXaTXXXXXXXXXXXX-750-481.jpg",
        items:[{
            "itemLink": "##",
            "imgSrc": "https://placeimg.com/350/350/people/grayscale",
            "poductName":"Carter's1年式灰色长袖连体衣包脚爬服全棉鲸鱼男婴儿童装115G093",
            "price": "299.06",
            "preferential": "满400减100",
            "activityType": "1小时内热卖5885件",
            "shopLink":"##",
            "activeName": "马上抢！"
        }
            ....
        }]
    }]
}

接下来的工作就是美化工作了。在写具体样式之前，有几个点需要先了解一下。

把视觉稿中的`px`转换成`rem`

读到这里，大家应该都知道，我们接下来要做的事情，就是如何把视觉稿中的px转换成rem。在此花点时间解释一下。

首先，目前日常工作当中，视觉设计师给到前端开发人员手中的视觉稿尺寸一般是基于640px、750px以及1125px宽度为准。甚至为什么？大家应该懂的（考虑Retina屏）。

正如文章开头显示的示例设计稿，他就是一张以750px为基础设计的。那么问题来了，我们如何将设计稿中的各元素的px转换成rem

如何快速计算

在实际生产当中，如果每一次计算px转换rem，或许会觉得非常麻烦，或许直接影响大家平时的开发效率。为了能让大家更快进行转换，我们团队内的同学各施所长，为px转换rem写了各式各样的小工具。

CSSREM

CSSREM是一个CSS的

最低0.47元/天解锁文章

weixin_41809141

关注

2
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
rem移动端布局怎么适配IOS和Android

rem移动端布局怎么适配IOS和Android 昨天“佬大”问我做的h5页面在ios上面显示正常，但是Android就变惨不忍睹了，于是我又开始了度量之路，几个小时过去了......“佬大”问好了没。我说：“还没”那你还是问下“俊伟”吧，果然一问牛逼的同事，迎刃而解的快感你感受到了没。做为一个程序员一定要学会问问问。我当时用的是这种方式 &lt;meta name="v...
复制链接

扫一扫