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

不同端的适配


作为前端"资深"切图仔(开个玩笑,还在学徒中),很多时候,我们开发的项目只在PC端运行,但是也会在手机移动端内访问,所以我们更多时候需要考虑网站在PC端和移动端是否适配问题,接下来就是我在学习中学到的适配技巧哦,快学起来!

问题场景

今天在做移动端demo的时候,发现了一个让人难以忍受的css适配问题,如果不做屏幕适配的话,代码量真的太大了,后来发现了一招,可以简单快速的解决这个问题。

我们接下来做一个小测试吧,能更好的理解怎么去做到适配的。

css 复制代码
<div class="app">
        app
</div>

// css
.app {
    width: 200px;
    height: 200px;
    background-color: red;
}

很显然,我们会得到一个固定长宽的正方形在页面上。

但是如果我们换一个手机来打开这个网页呢?

这个正方形还是这么大,其实我们换个手机就是为了能够更好的看这个图形,可不能让上帝们花了钱,却没有好的体验不是。所以对于不同屏幕宽度的设备,也应有更适应的css对于来渲染对吧。

那么接下来我们用媒体查询来实现,不同宽度的屏幕对应不同的css样式吧。我们在style内加入如下代码:

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

可以看到当更换更大的设备时,css发生了改变,min-width: 400px的意思就是屏幕宽度大于等于400px的时候,应用@media的css样式,原先的css样式会被覆盖.

那么问题来了,如果我们有很多个媒体查询条件呢?是不是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;
    }
}

这样我们就不用一直复制修改app的样式了,只需要修改根节点的字体大小就好了,而且当使用更大的设备时,需要更大的字体去显示,这也刚好适合我们的应用场景了。

优雅的适配封装

下面是封装的js适配代码:

ini 复制代码
(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)
  1. 使用IIFE(立即执行函数表达式)来封装整个功能,确保变量不会污染全局作用域。
  2. 获取文档的<html>元素,存储在docEl变量中。
  3. 添加一个事件监听器,监听DOMContentLoaded事件,当DOM加载完成时调用recalc函数。
  4. recalc函数中:
    • 获取<html>元素的可视宽度(不包括滚动条),存储在width变量中。
    • 根据width计算新的字体大小。这里使用了一个公式20 * (width / 320),意味着当宽度为320px时,根元素的字体大小为20px;宽度增加时,字体大小按比例增加。
    • 将计算出的字体大小设置为<html>元素的style.fontSize属性,单位为px
  5. 最后,将document对象作为参数传入IIFE,使内部函数可以访问到文档对象。

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

相关推荐
Mr_Xuhhh30 分钟前
重生之我在学环境变量
linux·运维·服务器·前端·chrome·算法
永乐春秋1 小时前
WEB攻防-通用漏洞&文件上传&js验证&mime&user.ini&语言特性
前端
鸽鸽程序猿1 小时前
【前端】CSS
前端·css
ggdpzhk1 小时前
VUE:基于MVVN的前端js框架
前端·javascript·vue.js
小曲曲2 小时前
接口上传视频和oss直传视频到阿里云组件
javascript·阿里云·音视频
学不会•4 小时前
css数据不固定情况下,循环加不同背景颜色
前端·javascript·html
EasyNTS4 小时前
H.264/H.265播放器EasyPlayer.js视频流媒体播放器关于websocket1006的异常断连
javascript·h.265·h.264
活宝小娜6 小时前
vue不刷新浏览器更新页面的方法
前端·javascript·vue.js
程序视点6 小时前
【Vue3新工具】Pinia.js:提升开发效率,更轻量、更高效的状态管理方案!
前端·javascript·vue.js·typescript·vue·ecmascript
coldriversnow6 小时前
在Vue中,vue document.onkeydown 无效
前端·javascript·vue.js