前端想实现随着网页的大小，网页中的元素也会动态的改变大小。可以通过rem或者em来实现。
由于px是像素值，可以理解为是绝对大小，自适应要是实现的是相对大小；
em是随着同级别下的font-size的大小改变进行改变；
rem是随着<html>根的font-size的大小改变进行改变。
我们暂时选择rem来实现自适应。
思路为，在js中获取网页的宽度，来动态的改变font-size的大小。比如现在对宽度进行24等分，那么实现代码如下：
```
<script>
function placeholderPic(){
var w = document.documentElement.offsetWidth;
// 获取宽度后进行24等分，每一个rem为24分之一
document.documentElement.style.fontSize=w/24+'px';
}
placeholderPic();
// 监听网页改变，一旦改变，就会动态改变其大小
window.onresize=function(){
placeholderPic();
}
</script>
```
textarea高度自适应自动增高撑开-前端开发博客 做个记录.....
参照 移动前端自适应适配布局解决方案和比较纯css3使用vw和vh实现自适应的方法
前端想实现随着网页的大小，网页中的元素也会动态的改变大小。可以通过rem或者em来实现。 由于px是像素值，可以理...
简单事情简单做-宽度自适应 所谓宽度自适应严格来说是一种PC端的自适应布局方式在移动端的延伸。在处理PC端的前端界...
什么是自适应？ 前端工程师的必备技能如何在不同大小设备上呈现同样的网页。 自适应和响应式的区别 响应式布局 就是一...
/* window resize em 配合 font-size rem media-query 百分百% float
一、媒体查询 二、引用js，用rem代替px
项目里有列表如下排布，块的宽度固定为230px，需做弹性布局。也可使用bootstrap、antd等框架的栅格布局...
自适应问题 PC端随屏幕分辨率与窗口大小自适应 参考文献 vue项目PC端随屏幕分辨率与窗口大小自适应[https...
html 元素自适应 对于我们做前端可视化的人来说，最苦恼的一个地方莫过于，客户需要我们对产品做自适应，特别是还需...
本文标题：前端自适应
本文链接：https://www.haomeiwen.com/subject/kfqlyhtx.html
网友评论