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 需要手动修改为自己的默认大小