【手写一个页面自适应】媒体查询布局视口rem/em

李桥桉

已于 2023-04-20 00:05:14 修改

阅读量954

点赞数

分类专栏：前端文章标签：前端 javascript

于 2023-04-10 00:16:14 首次发布

本文链接：https://blog.csdn.net/wodegecsdn/article/details/130045201

版权

文章介绍了如何实现手写页面自适应字体，通过JavaScript动态设置根元素的font-size，并讨论了流式布局、媒体查询、移动端视口概念以及rem、vw/vh单位在响应式设计中的应用。同时提到了阿里团队的flexible.js作为自适应解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

手写的一个页面自适应字体

只需要引入这个JavaScript文件就行。文末有更好的自适应方法。

// 手动写页面自适应字体
window.onload = function () {

    function screenResize() {
    // 拿到屏幕宽度
    var html = document.documentElement;
    // 计算font-size 大小,此处的100是指想要100px大小的font-size大小
    var fontSize = html.clientWidth * 100 / 750;
    // 设置根元素 font-size 大小
    html.style.fontSize = fontSize + 'px';
    document.body.style.fontSize = "0.2rem"
    }

    // 页面初始化调用
    screenResize()

    // 监测页面宽度发生变化
    window.onresize = function () {
    screenResize()
    }
}

一、布局介绍

流式布局 =》百分比布局所有的东西都采用百分比完成

<div style="width:25%">
</div>

媒体查询 rem em vw/vh

布局只是一种手段不要被他束缚

布局的目的就是 =》将设计稿完美展现在PC端移动端有一定的兼容性

详细在后期

二、移动端项目

一般在开发者工具中查看

视口(移动端)

视口是可见区域显示的区域实际上就是移动端屏幕除去 UI外的可见范围

布局视口实际所占空间大小的区域 PC端分辨率大于移动端移动端会出现溢出(出现滚动条)

浏览器默认计算布局视口大小是 980px 此刻 100% === 980px

视觉视口肉眼可见的窗口就是视觉视口不算滚动条部分

理想视口页面可以正常在视觉视口内完美展示且不会出现滚动条视觉视口 === 布局视口

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

viewport 视口

content 设置的内容

width=device-width 宽度等于设备宽度 设置理想视口

initial-scale=1.0 设置初始的缩放比例 默认值 1.0 可以设置成其他的

minimum-scale=1.0 允许用户可操作的最小缩放比例 默认 1.0

maximum-scale=1.0 允许用户可操作的最大缩放比例 默认 1.0

user-scalable=no|yes 是否允许用户缩放 默认值是no
一般情况下不允许用户缩放页面 会对我们的页面造成问题