分享两个常用的rem布局方式

 

关于rem

这种技术需要一个参考点，一般都是以<body>的“font-size”为基准。

比如我们设置body，html的字体大小为10px；那么1rem就是10px,

这样一来，我们设置字体大小相当于“14px”时，只需要将其值设置为“1.4em”。

1.手机淘宝一直用的方法：思路是通过js动态的获取 设备的DPR（设备像素比），根据dpr来改变标签

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;"/>
中的属性值；
代码如下
复制代码
复制代码
var dpr, rem, scale;
var docEl = document.documentElement;
var fontEl = document.createElement('style');
var metaEl = document.querySelector('meta[name="viewport"]');

dpr = window.devicePixelRatio || 1;
rem = docEl.clientWidth * dpr / 10;
scale = 1 / dpr;
// 设置viewport，进行缩放，达到高清效果
metaEl.setAttribute('content', 'width=' + dpr * docEl.clientWidth + ',initial-scale=' + scale + ',maximum-scale=' + scale + ', minimum-scale=' + scale + ',user-scalable=no');

// 设置data-dpr属性，留作的css hack之用
docEl.setAttribute('data-dpr', dpr);

// 动态写入样式
docEl.firstElementChild.appendChild(fontEl);
fontEl.innerHTML = 'html{font-size:' + rem + 'px!important;}';


window.dpr = dpr;
window.rem = rem;
复制代码
复制代码

此时 在dpr=2时1rem=75px;

所以如果我们要设置div的宽度为750px;(注：750px,为设计稿中div的宽度)就要写为：width：750/75*1rem;

最后因为dpr为2，页面scale了0.5，所以在手机屏幕上显示的真实宽高应该是375px，就刚刚好。

如果设置的值不是好算的数字，比如123px,那就很蛋疼了

为了减少计算，在less中可以定义以下函数

.change_val(@name, @px){
    @{name}: @px / 75 * 1rem;
}

这样在less中就可以写为

.container{ 
　　.change_val (width,123); //123是设计稿原值 
　　.unchanged_val(font-size,100)
}

另：在设计中我们一般希望font-size一直固定不变对此：

复制代码
复制代码
.unchanged_val(@name, @px){
    @{name}: round(@px / 2) * 1px;
  [data-dpr="2"] & {
      @{name}: @px * 1px;
  }
  // for mx3
  [data-dpr="2.5"] & {
      @{name}: round(@px * 2.5 / 2) * 1px;
  }
  // for 小米note
  [data-dpr="2.75"] & {
      @{name}: round(@px * 2.75 / 2) * 1px;
  }
  [data-dpr="3"] & {
      @{name}: round(@px /*3 / 2) * 1px
  }
  [data-dpr="3.5"] & {
      @{name}: round(@px * 3.5 / 2) * 1px;
  }
  // for 三星note4
  [data-dpr="4"] & {
      @{name}: @px * 2px;
  }
}
复制代码
复制代码

 



2.我们可以以iphone6（375*667）设计稿为原型：


设置css




html {
  font-size: calc(100vw/3.75);
}




这个意思就是设置 html的font-size为100px;


因为这样写比较方便，比如在写一个div宽度为75px时，直接定义width：0.75rem;就可以了


为了避免calc()的兼容性问题，可以加上如下js；




  document.documentElement.style.fontSize = window.innerWidth/3.75 + 'px';




 










            

            
posted @ 
 
糖~豆豆 
阅读(1633) 
评论(0) 
编辑 
收藏 
举报


        

	    
	    
    









    
    

    
    



    

        
    

        

            
                
                
            
        

    

编辑推荐：



· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
    

· .NET Core 中如何实现缓存的预热？
    

· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
    

· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
    

· 基于Microsoft.Extensions.AI核心库实现RAG应用
    



    

    阅读排行：
    

 ·          阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗？
        

 ·          【译】Visual Studio 中新的强大生产力特性
        

 ·          10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
        

 ·          【设计模式】告别冗长if-else语句：使用策略模式优化代码结构
        

 ·          字符编码：从基础到乱码解决
        



    
    



	

	

	
	

	

	

	





    

        




    
    Live2D
     
    
    




    

    

        
欢迎阅读『分享两个常用的rem布局方式』

        

        

            
            
            
            
            
            
            
        

    

    
    
    




    


    
    








  

  
点击右上角即可分享

  微信分享提示

   
    
AI IDE Trae