移动端布局rem em

Posted 2020-10-25 快乐~

1、概念

em作为font-size的单位时，其代表父元素的字体大小，em作为其他属性单位时，代表自身字体大小

rem作用于非根元素时，相对于根元素字体大小；rem作用于根元素字体大小时，相对于其出初始字体大小

优缺点：em就是为字体和行高而生的，有些时候子元素字体就应该相对于父元素，元素行高就应该相对于字体大小；而rem的有点在于统一的参考系

2、Rem布局原理

rem布局的本质是等比缩放，一般是基于宽度

3、比Rem更好的方案

vw —— 视口宽度的 1/100；vh —— 视口高度的 1/100

4、Rem的问题

1、首先是字体的问题，字体大小并不能使用rem，字体的大小和字体宽度，并不成线性关系，所以字体大小不能使用rem；由于设置了根元素字体的大小，会影响所有没有设置字体大小的元素，因为字体大小是会继承的

• 解决方案：在body中修正

• 追问 ： 字体的大小如何实现响应式

通过修改body字体的大小来实现，同时所有设置字体大小的地方都是用em单位，对就是em，因为只有em才能实现，同步变化，我早就说过em就是为字体而生的

@media screen and (min-width: 320px) {
    body {font-size: 16px}
}
@media screen and (min-width: 481px) and (max-width:640px) {
    body {font-size: 18px}
}
@media screen and (min-width: 641px) {
    body {font-size: 20px}
}

p {font-size: 1.2em}
p a {font-size: 1.2em}

2、如果用户在PC端浏览，页面过宽怎么办？

一般我们都会设置一个最大宽度，大于这个宽度的话页面居中，两边留白

var clientWidth = document.documentElement.clientWidth;
clientWidth = clientWidth < 780 ? clientWidth : 780;
document.documentElement.style.fontSize = clientWidth / 100 + ‘px‘;

设置body的宽度为100rem，并水平居中

body { margin: auto; width: 100rem } 

3、如果用户禁用了js怎么破？

首先可以添加noscript标签提示用户

<noscript>开启javascript，获得更好的体验</noscript> 

给html添加一个320时的默认字体大小，保证页面可以显示

html {fons-size: 3.2px} 

如果你想要更好的体验，不如添加媒体查询吧

@media screen and (min-width: 320px) {
    html {font-size: 3.2px}
}
@media screen and (min-width: 481px) and (max-width:640px) {
    html {font-size: 4.8px}
}
@media screen and (min-width: 641px) {
    html {font-size: 6.4px}
}

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">