移动端rem与px单位转换响应式适配的方法

收录时间:2020-03-26 11:14:29    所属分类: 文章干货
目前手机端或者说移动端的网站是主流的形式,PC站已经历经这么多年,技术相对来说已经很完整了,但是移动端的网站是近几年才刚刚开始的,技术上不断在创新,包括很多的大公司采用的方法也不断升级,其实从我写了这么多的网站来看,最实用的方法还是使用rem单位转px单位最实用,下面我们就来说说这个方法。
移动端rem与px单位转换响应式适配的方法

目前手机端或者说移动端的网站是主流的形式,PC站已经历经这么多年,技术相对来说已经很完整了,但是移动端的网站是近几年才刚刚开始的,技术上不断在创新,包括很多的大公司采用的方法也不断升级,其实从我写了这么多的网站来看,最实用的方法还是使用rem单位转px单位最实用,下面我们就来说说这个方法。


首先看一下代码,当然这个版本是我升级过的,因为之前的方法还存在很多的问题,这个版本基本上是按照京东商城的思路做的,后面我们也分别来分析一下京东商城的方式和淘宝网的代码结构,让大家知道这些技术的升级过程。


代码如下:

window.onload = function(){
    getRem(750,100)
};

window.onresize = function(){
    getRem(750,100)            
};

function getRem(pwidth,prem){
    var html = document.getElementsByTagName("html")[0];     
    var oWidth = document.body.clientWidth || document.documentElement.clientWidth;
    if(oWidth>=750){
        html.style.fontSize = "100px";
    }else{
        html.style.fontSize = oWidth/pwidth*prem + "px";
    }             
}


上面的代码是经我改造过的,之前我一直使用的是一个原始版本,原始版本面临一个非常严重的问题,在正常手机端看的时候是响应式适配的,但是到了pc端查看就回出现页面内容无限制拉伸,导致很多内容过大,影响PC端的阅读体验,看一下下面的图示。




上面的图片是在iPhoneX设备下面,内容都进行100%适配相应,无论是手机端的任何设备都能达到不错的体验,但是问题在于突然切换到PC端,问题就大了。




在正常的浏览器下,还是使用适配的话,那么图片会撑满整个页面,那样用户体验极差,用户只能看到所有的元素都是大大的,会显得极其粗陋。

但是有人可能会说,哪有人从移动端直接切PC端的,PC就是PC,移动端就是移动端。

问题在于百度抓取页面的时候,很可能会把你这个移动端页面抓取到,而用户正好使用的PC端看你的页面,从而导致用户查看了百度收录的你网站的移动页面,所有就回出现这个问题。

那么解决办法是什么那,那就是给适配添加限制,我的方法就是窗口改变的时候,让屏幕的宽度最大就是750px,超过750px的就一律限制在这个范围之内,不让他再变化了。从而问题解决了。

下面是我做了一点demo测试






看到没,最大就是这样,限制一下屏幕宽度,让整体内容居中显示即可,所以大家想要使用px转rem单位的话,直接复制最上面的代码,放到你的js公共文件,或者你的页面头部即可。


下面看下京东的方法,京东采用的是原生的方式使用的事media媒体查询的方法做的,我觉得这种方法有点麻烦,当然大家可以也试试看。









京东采用的事media媒体查询,代码如下:


@media screen and (max-width:320px) {
	html {
		font-size: 17.06667px
	}
}

@media screen and (min-width:540px) {
	html {
		font-size: 28.8px
	}
}




5233

最新发布