remcss原生适配方案

less文件 引入less文件 方法:

声明:@import "被引入文件名称.less";

定义:

		    UI设计图尺寸:@my_UI

		    UI设计图份数:@fs

		设计图字节大小:@size

				    公式:@size : @my_UI / @fs



	 例如:屏幕尺寸:400px   UI设计图尺寸宽度640px  分10份 

   html页面:

    	<div></div>

	css页面:

     @UI_my: 640px;
     @fs:10;
     @size: @UI_my / @fs;
    
     @media (width:400px){
    		//设置网页根字节大小
            html{
    				font-size : 400px / @fs;
    		    }
     }
    div{

  			width: 100rem / @size;

  		   height: 100rem / @size;

  	   background: red;

    	}

此时html根字节就调整为40px

宽度在400px屏幕显示的div模块大小 为100*40 / 64 = 62.5px

62.5px / html根字节 = 1.5625rem (UI设计图在400px屏幕单个元素的数值)

     	

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值