如何使用rem适配移动端及移动端适配的其他方法汇总

jcat_李小黑

于 2020-03-03 18:10:07 发布

阅读量2.1k

点赞数 3

文章标签： javascript css css3

本文链接：https://blog.youkuaiyun.com/weixin_43216105/article/details/104636833

版权

本文介绍了如何使用rem进行移动端适配，并推荐了vscode的cssrem插件自动转换px。此外，还探讨了无插件版px转rem的方法，以及css3媒体查询、flex布局、grid布局和viewport宽度布局等其他移动端适配策略，包括它们的浏览器兼容性问题。

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

前言

移动端适配老生常谈；方法有很多种，这里记录一下，我最常用的方法：rem
首先第一步必须在header中写标签：

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

正文

1. 安利一个vscode的cssrem插件

cssrem 这个插件的作用是自动将px转为rem，基础默认字体大小是16px；

2. css写法

例：160px*60px的div

div{
   
  width: 10rem;
  height: 3.75rem;
}

3. 适配屏幕的main.js代码

假设原型图的大小是iPhone6p : 414*736，默认字体大小是16px;

;(function(doc, win) {
   
  var docEl = doc.documentElement,
    resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
    recalc = function() {

最低0.47元/天解锁文章