实现移动端适配或者和响应式布局

more名奇妙

已于 2022-09-24 21:58:07 修改

阅读量1.3k

点赞数 2

分类专栏： CSS JS 文章标签： html 前端 css js

于 2022-09-24 21:52:38 首次发布

本文链接：https://blog.csdn.net/m0_67948827/article/details/127024803

版权

本文介绍了七种移动端适配和响应式布局的方法，包括viewport适配、媒体查询media实现rem适配、JS配合修改rem、动态JS适配、百分比适配、vw/vh单位以及Flex布局结合rem和JS。每种方法详细阐述了其原理和应用场景，帮助开发者选择适合的适配策略。

摘要由CSDN通过智能技术生成

移动端浏览器通常都在一个比屏幕更宽的虚拟窗口中渲染页面，这个虚拟窗口就是viewport，目的是正常展示没有做移动端适配的网页，可以让他们完整的展现给用户。我们有时用移动设备访问桌面版网页就会看到一个横向滚动条，这里可显示区域的宽度就是viewport的宽度。

常规使用，页面可以缩放就用下面的代码

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

如果不想页面缩放就用下面的代码

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

原理：通过设置 initial-scale , 将所有设备布局视口的宽度调整为设计图的宽度.

//获取meta节点
var metaNode = document.querySelector('meta[name=viewport]');
 
//定

关注

专栏目录