动态rem
1. 首先我们先介绍当下的长度单位
px 像素
em 一个M的宽度 / 一个汉字的宽度 1em == 自身的 font-size
rem 全称 root em 是根元素（html)的 font-size
vh 全称 viewport height 100vh == 视口高度
vw 全程 viewport width 100vw == 视口宽度
因为网页的默认font-size： 16px 所以1rem默认是 16px chrome 的最小字体像素默认是 12px
一个元素在没有设置font-size的情况下会去继承父元素的font-size
2. 移动端的布局
移动端的布局一般就两种
先说整体缩放
整体缩放，其实就是将pc端的网页缩小到手机端屏幕能看到网页全貌的大小
苹果手机刚出来时就是使用这种布局，苹果公司研究发现世界上大多数的网页宽度是980px，然而苹果手机的宽度像素是320px，所以苹果手机的浏览器用320像素的屏幕宽度去模拟980px的宽度，实现了整体缩放
为了看到效果，要将 <meta name="viewport"> 这一部分删除
<style>
div{
width:980px;
margin:0 auto;
background:#f0f0f0;
}
ul{
list-style:none;
}
li{
float:left;
margin-left:10px;
}
clearfix::after{
content:"";
display:block;
clear:both;
}
</style>
</head>
<body>
<div>
<ul>
<li>选项1</li>
<li>选项2</li>
<li>选项3</li>
<li>选项4</li>
<li>选项5</li>
<li>选项6</li>
</ul>
</div>
</body>
但这种整体缩放的用户体验并不好，所以pass，我们来讲百分比布局
百分比布局
//百分比布局
<style>
.child{
background-color:#ccc;
text-align:center;
width:40%;
margin:10px 5%;
float:left;
}
.clearfix::after{
content:"";
display:block;
clear:both;
}
</style>
</head>
<body>
<div class="parent clearfix">
<div class="child">选项1</div>
<div class="child">选项2</div>
<div class="child">选项3</div>
<div class="child">选项4</div>
</div>
</body>
可以看到百分比布局能自动适应屏幕宽度。
但是百分比布局有个缺点，宽度和高度不能做任何关联
可以看上面的gif图，宽度一直变长，然而高度没有变化
为了让选项方块的高度是宽度的一半，实现该效果我们需要知道屏幕的宽度，再来确定选项的宽度和高度
这里可以使用vw，但vw的兼容性比较差，我们可以使用rem来代替vw
首先rem是以html的font-size为基准的，所以我们可以让html的font-size==pageWidth
<script>
let pageWidth = window.innerWidth;
document.write('<style>html{font-size:'+ pageWidth/10 +'px}</style>')
</script>
为了更好的使用rem,这里1rem等于屏幕宽度的10分之1。注意不能做到1rem==屏幕的百分之1。因为浏览器的最小 font-size是12px ;
按如上改动代码
<style>
.child{
background-color:#ccc;
text-align:center;
width:4rem;
height:2rem;
margin:10px 0.05rem;
float:left;
line-height:2rem;
}
.clearfix::after{
content:"";
display:block;
clear:both;
}
</style>
</head>
<body>
<div class="parent clearfix">
<div class="child">选项1</div>
<div class="child">选项2</div>
<div class="child">选项3</div>
<div class="child">选项4</div>
</div>
</body>
效果入图
可以看到宽度和高度都能按百分比变化了，但是我们会发现一个很麻烦的东西，设计师给我们的设计稿，我们却必须把每个元素的像素单位换算为rem。这里我们就要scss来换算px了
3.scss动态换算px
@function pxToRem($px){
@return $px/$designWidth*10+rem;//10是把整个屏幕分为10rem
}
$designWidth:320;//设计稿宽度
.child{
background-color:#ccc;
text-align:center;
width:pxToRem(128);//4rem;
height:pxToRem(64);//2rem;
margin: 10px pxToRem(1.6);
float:left;
line-height:pxToRem(64);
}
.clearfix::after{
content:"";
display:block;
clear:both;
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
1.先瞧瞧效果： 2.代码是这样的： img src=images/circle.png alt= id=circle/@m...
一、虽然有的属性是boolean类型，但仍旧建议按照XHTML书写（属性名=属性值）格式...
作者：Joe Seifi 译者：前端小智 移动： https://mp.weixin.qq.com/s/p5... 有梦...
1、纯工具操作步骤，懂代码更容易 划线就是不符合国人的审美观念，看着就别扭，...
折叠式卡片布局在PC版网站中可能不常见，但是在手机版，小屏幕的网页浏览会大发...
简介： 6月4日，以“开启分布式云新时代”为主题2021云边协同大会在北京举行，本...
本文没有咬文嚼字的地方，只是一个配色技巧的分享，十分简单，简单到流泪，但或...
在默认情况之下，如果在Canvas之中将某个物体（源）绘制在另一个物体（目标）之...
前言 Canvas绘制多变形非常简单，只要懂得Canvas路径 + 简单的初中数学知识即可...
背景 在公司参与一个原生APP和h5混合开发的项目，本人在项目中负责h5部分，现将...
