Mrcdh技术博客 Mrcdh技术博客
首页
  • Html5
  • Javascript
  • Nodejs
  • electron
  • Android
  • 微信公众号
  • 框架
  • 其他
  • Mysql
  • PHP
  • Python
  • java
  • Gulp
  • 其它
  • 网站
  • 资源
  • 分类
  • 标签
  • 归档
GitHub (opens new window)

Mrcdh

全栈开发小学生
首页
  • Html5
  • Javascript
  • Nodejs
  • electron
  • Android
  • 微信公众号
  • 框架
  • 其他
  • Mysql
  • PHP
  • Python
  • java
  • Gulp
  • 其它
  • 网站
  • 资源
  • 分类
  • 标签
  • 归档
GitHub (opens new window)
  • Html5

    • 使用频繁的网页元信息
    • input file 上传文件指定文件类型
    • Less和Scss语法对比
    • HTTP常见响应码
    • iframe常用操作
    • h5操作媒体设备(音频和视频)
    • canvas的基本使用
    • 手机网页自适应
    • 常用CSS
    • CSS布局-多列布局
    • scss使用常见问题
  • JavaScript

  • Nodejs

  • express

  • electron

  • Android

  • 微信公众号

  • 框架

  • 其他

  • selenium

  • Sequelize

  • 大前端
  • Html5
mrcdh
2020-10-23

手机网页自适应

手机网页自适应的一种方法,原理就是通过计算当前屏幕和设计分辨率的比例来设置HTML根元素的fontSize,然后使用相对单位rem来设置尺寸。

建议将fontSize设置为100px,这样的话设计稿10px就是0.1rem,也可以设置为50px,这样10px就是0.2rem,这样有利于设置尺寸。

头部声明:

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

关键代码:

<script>
  // 设计尺寸
  var designWidth = 750;
  (function (doc, win) {
    var docEl = doc.documentElement,
    resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
    recalc = function () {
      var clientWidth = docEl.clientWidth;
      if (!clientWidth) return;
      if (clientWidth >= designWidth ) {
        docEl.style.fontSize = '100px';
      } else {
        docEl.style.fontSize = 100 * (clientWidth / designWidth ) +  'px';
      }
    };

    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener('DOMContentLoaded', recalc, false);
  })(document, window);
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
#html5
上次更新: 2023/09/22, 16:54:32
canvas的基本使用
常用CSS

← canvas的基本使用 常用CSS→

最近更新
01
uniapp常见问题
03-19
02
Vue3项目搭建
12-25
03
使用pnpm的monorepo组织项目
11-01
更多文章>
Theme by Vdoing | Copyright © 2020-2025 Mrcdh | 苏ICP备2020058908号-1
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式
×