浅谈css布局

浅谈前端的布局
布局主要分为pc端和移动端，这两个主要方向，这里主要说pc端，移动端也差不多
传统的pc布局大致有这几种方案
1. 通过使用媒体查询，兼容主流的几个分辨率，宽度设为100% height采用px进行固定
2. 直接设置宽度为100% 然后内容布局定宽（px），进行内容布局
对于这两种布局，总感觉有点问题，于是去了解了一下css的布局单位
一：rem
对于这种我个人是推荐使用的
1. 首先它很简单，就是通过控制跟节点的fontSize大小，进行控制
2.  单位计量方便，一般来说我们使用rem布局，都是通过获取当前浏览器的宽度，然后等分成若干份（一般现在ui都是切1920*1080的），我们可以把页面等分19.2等分，这样1rem就等于100px方便计算
3.  下面是计算公式

// 实现自适应布局
// 这个函数是为了解决，当进行浏览器窗口大小操作时，rem还是之前的值，如果想要看到效果，需要进行一次手动刷新
// 所以，为了解决不手动刷新我们需要在浏览器窗口变化的时候，进行监听，如果浏览器窗口变化了，就进行rem的重新计算
// （也算是一个bug）
window.onresize = function () {
    rem()
}
rem()
// 进行rem的计算 因为是以1920px为基准进行计算的，所以为了方便，把1rem等于100px
function rem() {
    let width = document.body.clientWidth
     let fontSize = document.getElementsByTagName('html')[0].style.fontSize = width / 19.2 + "px"
}

当前这还是有一点问题，就是js和css有点耦合，虽然只有几行代码，但是css就是css，有没有一种就是单纯的css单位，不需要使用js，就可以用来做自适应布局呢？肯定是有的
就是vw单位
二：vw和vh单位
vw和vh就是视口单位

它默认把浏览器的宽分为100vw 高分为100vh，这样如果是以1920*1080的设计图来计算那么1vw就等于19.2px ，1vh就等于10.8px，当然单位换算，可能会有点麻烦，但是写起来真的很方便，个人也比较推荐这个单位做布局。

其实rem和vw无论是用来做移动端和pc端，都是可以的，原理基本相同

当然这些只是我自己的理解，有不对的麻烦指点一下