em单位和rem单位区别
- em作为font-size的单位时，其代表父元素的字体大小，em作为其他属性单位时，代表自身字体大小——MDN , 改动父元素的字体大小，子元素会等比例变化
- rem作用于非根元素时，相对于根元素字体大小；rem作用于根元素字体大小时，相对于其出初始字体大小——MDN,
/* 作用于根元素，相对于原始大小（16px），所以html的font-size为32px*/
html {font-size: 2rem}
/* 作用于非根元素，相对于根元素字体大小，所以为64px */
p {font-size: 2rem}
Rem布局原理
- rem布局的本质是等比缩放，一般是基于屏幕宽度
- 先按定高宽设计出来页面，然后转换为rem单位,配合js查询屏幕大小来改变html的font-size,达到整个页面的缩放
- rem是弹性布局的一种实现方式，弹性布局可以算作响应式布局的一种，但响应式布局不是弹性布局，弹性布局强调等比缩放，100%还原；响应式布局强调不同屏幕要有不同的显示，比如媒体查询
实际开发中的rem适配方案
- rem适配方案2 简洁高效rem适配方案flexible.js
- 手机淘宝团队出的简洁高效移动端适配库
- 我们再也不需要在写不同屏幕的媒体查询，因为里面js做了处理
- 它的原理是把设备划分成10等份，但在不同设备下，比例还是一致的
- 我们要做的就是确定好我们当前设备的html 文字字体大小就可以了
- 比如当前设计稿是750px 那么只需要把html文字大小设置为75px （750px/10）就可以
- 里面页面元素rem值：页面元素的px值 / 75
- 剩余的，让flexible.js去计算
- github地址: https://github.com/amfe/lib-flexible
- rem+媒体查询+less技术
1、设计搞常见的尺寸宽度
image.png
一般情况，我们以两套大部分适应的屏幕，放弃极端屏对其优雅降级，牺牲一些效果，现在基本以750为准
2、动态设置 html 标签 font-size 大小
- 假设设计稿是750px
- 假设我们把整个屏幕划分为15等分（划分标准不一可以是20等份也可以是10等份）
- 每一份作为html字体大小，这里就是50px
- 那么在320px设备的时候，字体大小为320/15 就是21.33px
- 用我们页面元素的大小 除以不同的 html 字体大小会发现他们比例还是相同的
- 比如我们以750 为标准设计稿
- 一个100*100像素的页面元素在 750屏幕下，就是 100 / 50转换为rem 是 2rem * 2rem 比例是1比1
- 320屏幕下，html字体大小就为 21.33 则2rem = 42.66px, 此时宽和高 都是42.66， 但是高和宽还是1比1
- 但是已经能实现不同屏幕下，页面元素盒子等比例缩放的效果
3、元素大小取值方法
- 最后的公式：页面元素的rem值 = 页面元素值（px） / (屏幕宽度 / 划分的份数)
- 屏幕的宽度 / 划分的份数就是 html font-size 的大小
- 或者：页面元素的rem值 = 页面元素值 （px） / html font-size 字体大小
4、总结出得一个媒体查询的公共文件 common.less
// 定义一个公共的common.less文件 先装nodejs node -v
// npm install -g less 查看下安装成功没 lessc -v
// vscode 插件可以直接将less文件转换为css文件 （Easy-LESS）
// 设置常见的屏幕尺寸， 修改里面的html文字大小
// 一定要写最上面
html{
font-size: 50px;
}
// 我是定义的划分是15等份
@no: 15;
// 320
@media screen and (min-width: 320px){
html{
font-size: 320px / @no;
}
}
// 360
@media screen and (min-width: 360px){
html{
font-size: 360px / @no;
}
}
// 375 iphone 678
@media screen and (min-width: 384px){
html{
font-size: 384px / @no;
}
}
@media screen and (min-width: 400px){
html{
font-size: 400px / @no;
}
}
@media screen and (min-width: 414px){
html{
font-size: 414px / @no;
}
}
@media screen and (min-width: 424px){
html{
font-size: 424px / @no;
}
}
@media screen and (min-width: 480px){
html{
font-size: 480px / @no;
}
}
@media screen and (min-width: 540px){
html{
font-size: 540px / @no;
}
}
@media screen and (min-width: 720px){
html{
font-size: 720px / @no;
}
}
@media screen and (min-width: 750px){
html{
font-size: 750px / @no;
}
}
下面给一个rem+js方案的完整例子，css的计算没有使用预处理器，这个很简单
html代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>rem布局——rem+js</title>
</head>
<body>
<noscript>开启JavaScript，获得更好的体验</noscript>
<div class="p1">
宽度为屏幕宽度的50%，字体大小1.2em
<div class="s1">
字体大小1.2.em
</div>
</div>
<div class="p2">
宽度为屏幕宽度的40%，字体大小默认
<div class="s2">
字体大小1.2em
</div>
</div>
</body>
</html>
css代码如下:
html {
font-size: 32px; /* 320/10 */
}
body {
font-size: 16px; /* 修正字体大小 */
/* 防止页面过宽 */
margin: auto;
padding: 0;
width: 10rem;
/* 防止页面过宽 */
outline: 1px dashed green;
}
/* js被禁止的回退方案 */
@media screen and (min-width: 320px) {
html {font-size: 32px}
body {font-size: 16px;}
}
@media screen and (min-width: 481px) and (max-width:640px) {
html {font-size: 48px}
body {font-size: 18px;}
}
@media screen and (min-width: 641px) {
html {font-size: 64px}
body {font-size: 20px;}
}
noscript {
display: block;
border: 1px solid #d6e9c6;
padding: 3px 5px;
background: #dff0d8;
color: #3c763d;
}
/* js被禁止的回退方案 */
.p1, .p2 {
border: 1px solid red;
margin: 10px 0;
}
.p1 {
width: 5rem;
height: 5rem;
font-size: 1.2em; /* 字体使用em */
}
.s1 {
font-size: 1.2em; /* 字体使用em */
}
.p2 {
width: 4rem;
height: 4rem;
}
.s2 {
font-size: 1.2em /* 字体使用em */
}
js代码如下:
var documentElement = document.documentElement;
function callback() {
var clientWidth = documentElement.clientWidth;
// 屏幕宽度大于780，不在放大
clientWidth = clientWidth < 780 ? clientWidth : 780;
documentElement.style.fontSize = clientWidth / 10 + 'px';
}
document.addEventListener('DOMContentLoaded', callback);
window.addEventListener('orientationchange' in window ? 'orientationchange' : 'resize', callback);
源网址:https://www.xyhtml5.com/3721.html
源网址:https://www.cnblogs.com/chen-cheng/p/13969372.html
