PC端自适应布局

概述

PC端自适应布局重要的无非就是屏幕宽度和屏幕分辨率的变化，当一个页面能够随着页面宽度的缩放正常展示，那便是实现了自适应。但是在我们实现自适应前，我们应该了解一下我们是想要哪种自适应，是想要随着页面宽度缩放页面中所有的内容都跟着缩放，还是页面中的内容不会变化但是到一定宽度界限时页面布局发生改变。

页面内容随之缩放

这种情况我们可以使用rem，在我们设置页面元素大小尺寸时采用rem，在js中监听页面尺寸改变，设置在不同分辨率以及屏幕宽度下rem和px的换算。

//获取最外面容器
const container = document.getElementsByClassName('container')[0];
function handleResize(){
    container.style.width = window.innerWidth + 'px';
    container.style.height = window.innerHeight + 'px';
    var htmlWidth = document.documentElement.clientWidth|| document.body.clientWidth;
    let htmlDom=document.getElementsByTagName('html')[0]
    htmlDom.style.fontSize= 10 / 1920 * htmlWidth + 'px';
}
window.onresize = handleResize
handleResize();

页面布局改变

实现这种效果，我们可以用flex布局，也可以使用@media媒体查询来实现当屏幕宽度放大缩小到一定程度某个元素的显示与隐藏