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屏幕单个元素的数值)

     	

你可能感兴趣的:(笔记,css)