rem+css轮播查询实现网页自适应

通过rem和css轮播查询实现网页自适应

最近工作需要开发一个简单的看板，就随便写了一个看板实现。但忽略了不同显示器分辨率不同的问题。自己使用的都是1920 * 1080的，这导致在大屏看板(分辨率是960*485)展示的时候出现了混乱。

所以便采用轮播查询来实现自适应的操作，废话不多说，直接操作实现。

一、设置根元素的字体大小

html{
    font-size: 16px;
}

我这里采用的是默认1rem=16px；谷歌浏览器就是这个比例。

二、注意事项

1、html页面一定要加这个,放置head标签中，基本现在所有的html页面都会加这个标签

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

2、所有的单位采用rem来表示，%也可以，不要使用px来表示。具体区别看度娘哈哈😁。

三、css轮播查询实现

使用轮播查询时，按大在前小在后的顺序写。

@media all and (max-width: 1441px) {  /*当屏幕尺寸小于1440px时，应用下面的CSS样式*/
    html{
        font-size: 12px !important;
    }
}

@media all and (max-width: 1201px) {  /*当屏幕尺寸小于1200px时，应用下面的CSS样式*/
    html{
        font-size: 10px !important;
    }
}

@media all and (max-width: 961px) {  /*当屏幕尺寸小于960px时，应用下面的CSS样式*/
    html{
        font-size: 8px !important;
    }
}

font-size的计算方式：现分辨率/原分辨率*初始时设置的根元素字体大小。如我开始的分辨率是1920的，设置的根元素字体大小是16px，现在要改变分辨率为1440，此时的根元素font-size=1440/1920×16=12。

当然，我们也可以通过js来实现，通过js来获取页面的宽高来实现。度娘上有好多大佬有这方面的教程，我一个小白就不多讲了。
好了，使用rem+轮播查询实现自适应大概就是 这样了。如有不足之处，请各位多多指教。