解决PC端和移动端的css简单适配问题

一般用媒体查询来实现,不同宽度的屏幕对应不同的css样式

css 复制代码
@media (min-width: 400px){
   .app {
        width: 400px;
        height: 400px;
        background-color: green;
    }
}

那么问题来了,如果我们有很多个媒体查询条件呢?是不是app的样式需要写很多份,当我们页面有很多很多个div盒子的时候,也是按照这样复制再修改,下班岂不是遥遥无期??估计也没人这么蠢,毕竟在坐的各位都是大佬。

我们知道,px是一个绝对单位,写死了就不会变,那我们有没有一个相对单位来给它进行长度和宽度的赋值呢?那就是rem了没得说了。

rem 是 CSS 中的一个长度单位,全称为 "root em",它代表相对于 HTML 文档根元素(即 <html> 元素)的字体大小。rem 单位结合了绝对单位和相对单位的优点,提供了一种灵活的方式来设置字体大小和其他尺寸,同时保持整体设计的一致性和可扩展性。

rem的特点 :其单位是相对于根元素,通常是html的字体大小,还有全局一致性,由于 rem 是相对于根元素的,所以你只需要在一个地方(通常是全局样式表的开始处)设置根元素的字体大小,就可以影响到整个页面中所有使用 rem 的元素。

例如,如果你的 <html> 元素的字体大小是 16px,那么 1rem 就等于 16px。如果你将一个段落元素的字体大小设置为 1.5rem,那么它的字体大小就会是 24px。

css 复制代码
.app {
    width: 10rem;
    height: 10rem;
    background-color: red;
}
@media (min-width: 400px){
    html{
        font-size: 20px;
    }
}

优雅的适配封装

javascript 复制代码
(function(doc){
    let docEl = doc.documentElement;  // 获取根节点的html
    doc.addEventListener('DOMContentLoaded',recalc)
    function recalc(){
        let width = docEl.clientWidth;
        docEl.style.fontSize = 20 * (width / 320) + 'px';
    }
})(document)
  • 获取<html>元素的可视宽度(不包括滚动条),存储在width变量中。

  • 根据width计算新的字体大小。这里使用了一个公式20 * (width / 320),意味着当宽度为320px时,根元素的字体大小为20px;宽度增加时,字体大小按比例增加。

  • 将计算出的字体大小设置为<html>元素的style.fontSize属性,单位为px

最后我们将这个做好的适配封装代码引入项目全局去使用就好了。

相关推荐
昔人'4 小时前
css`min()` 、`max()`、 `clamp()`
前端·css
鹏多多4 小时前
Vue项目i18n国际化多语言切换方案实践
前端·javascript·vue.js
一只小风华~4 小时前
Vue: 侦听器(Watch)
前端·javascript·vue.js
JarvanMo4 小时前
Flutter Debug模式:每个开发者都需要的秘密武器(但大多数人用错了)
前端
GDAL4 小时前
Knockout.js 备忘录模块详解
javascript·knockout
玲小珑5 小时前
LangChain.js 完全开发手册(八)Agent 智能代理系统开发
前端·langchain·ai编程
蓝胖子的多啦A梦5 小时前
【前端】VUE+Element UI项目 页面自适应横屏、竖屏、大屏、PDA及手机等适配方案
前端·javascript·elementui·html·前端页面适配
掘金安东尼5 小时前
前端周刊431期(2025年9月8日–9月14日)
前端·javascript·github
Bear on Toilet5 小时前
继承类模板:函数未在模板定义上下文中声明,只能通过实例化上下文中参数相关的查找找到
开发语言·javascript·c++·算法·继承
风若飞5 小时前
npm ERR! code CERT_HAS_EXPIRED
前端·npm·node.js