rem自适应手机端布局

比眉伴天荒 2022-01-07 15:05 354阅读 0赞

通过js根据屏幕设备尺寸的大小，改变根元素的值：

var html = document.querySelector("html");
    var    rem = html.offsetWidth / 7.5;
     html.style.fontSize = rem + "px";

</script>

最简单的适配方案：

7.5 为 设计图的宽度除以100；

H5端自适应框架 使用方便，设计图的1px对应0.01rem,设计图的字体大小24px对应0.24rem,就是如此简单！

在header中写入以下代码，实时更新html的fontsize:

![989809-20181106225817270-892184559.png][]

css样式：  
正常情况下的写法：  
div\{  
width:100px;  
height:200px;  
border:1px solid \#F00;  
padding:20px;  
\}  
使用自适应方法，px用rem ，1px的仍然可以用1px，可以改写为：  
div\{  
width:1rem;  
height:2rem;  
border:1px solid \#F00;  
padding:0.2rem  
\}

方法二：手机端自适应：

js代码：

(function (doc, win) {
            var docEl = doc.documentElement;
            resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
            recalc = function () {
                var clientWidth = docEl.clientWidth;
                if (!clientWidth) return;
                docEl.style.fontSize = 50 * (clientWidth / 375) + 'px';
            };
            if (!doc.addEventListener) return;
            win.addEventListener(resizeEvt, recalc, false);
            doc.addEventListener('DOMContentLoaded', recalc, false);
        }(document,window));

3. iphone4/iphone5/iphone6/iphone6p 的css media query：媒体查询
    
    @media (device-height:480px) and (-webkit-min-device-pixel-ratio:2){/* 兼容iphone4/4s */
    
        .class{}
    
    }
    
    
    @media (device-height:568px) and (-webkit-min-device-pixel-ratio:2){/* 兼容iphone5 */
    
        .class{}
    
    }
    
    @media(min-device-width:375px)and(max-device-width:667px)and(-webkit-min-device-pixel-ratio:2){

方法三：js代码

var deviceWidth = document.documentElement.clientWidth;
      if (deviceWidth > 750) deviceWidth = 750;
      document.documentElement.style.fontSize = deviceWidth / 7.5 + 'px';

css代码：

@media screen and (max-width:321px){
    	  html{font-size:15px}
     }
    
    @media screen and (min-width:321px) and (max-width:400px){
    	  html{font-size:16px}
    }
    
    @media screen and (min-width:400px){
    	  html{font-size:18px}
    }

### **注意：1、手机端适配 rem、或者 百分号** ###

**2、手机端引入背景图时，会出现图片样式变，通过background-size: 0.9rem 0.9rem;**

**3、手机端需要引入：<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0,minimal-ui">**

手机端的适配方法有多种，会不断更新~

转载于:https://www.cnblogs.com/lvxisha/p/9919497.html

[989809-20181106225817270-892184559.png]: /images/20211220/731404d1abd143c9aba281f44577c015.png