rem 适配方案

html 视口文件

<meta name="viewport" content="width=device-width, user-scalable=no,initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

em 和 rem 的区别

1. em 相对于父元素的字体大小来说的
div {
    
    
    font-size: 12px;
}
2. rem 相对于 html元素的字体大小来说的, rem的优点就是可以通过修改html里面的文字大小来改变页面中元素的大小可以整体控制
html {
    
    
	font-size: 12px;
}

适配方案一

使用媒体查询根据不同设备按比列设置 html 文字大小，然后页面元素使用 rem 作为尺寸单位，当 html
字体大小改变时，元素也会发生改变，从而达到等比缩放的适配

1.首先我们选一套标准尺寸 750为准
2. 我们用屏幕尺寸除以我们划分的份数（15等份，份数不定），得到了 html 里面的文字大小，所以 750 下文字大小为 50px，算法：750 / 15
3. 页面元素的rem值 = 页面元素在 750像素的下px值 / html 里面的文字大小列入：100px的宽度等于2rem，因为1rem等于文字大小50px，算法 100 / 50

<style>
    @media screen and (min-width: 320px) {
    
    
        html {
    
    
            font-size: 21.33px;
        }
    }
    
    @media screen and (min-width: 750px) {
    
    
        html {
    
    
            font-size: 50px;
        }
    }
    
    div {
    
    
        width: 2rem;
        height: 2rem;
        background-color: pink;
    }
</style>

适配方案二下载地址：flexible.js，引入下载的 Js 文件方可使用，flexible 给我们屏幕划分为了 10 等份

<script src="js/flexible.js"></script>

vscode px 转换为 rem 插件 cssrem

cssrem // 可以自动把  px 转换为 rem
这个插件默认的html文字大小 cssroot  16px 需要手动修改为自己的默认大小

猜你喜欢